Javascript DOM CSS Style borderBottom Property

Introduction

Add a bottom border to a <div> element: 

document.getElementById("myDiv").style.borderBottom = "thick solid #0000FF";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Set bottom border</button>

<script>
function myFunction() {/*from w  ww .j av a 2 s. co  m*/
  document.getElementById("myDiv").style.borderBottom = "thick solid #0000FF";
}
</script>

</body>
</html>

The borderBottom property sets or gets up to three separate border-bottom properties, in a shorthand form.

With this property, you can set/get one or more of the following:

  • border-bottom-width
  • border-bottom-style
  • border-bottom-color

Property Values

Parameter Description
width Sets the width of the bottom border
style Sets the style of the bottom border
color Sets the color of the bottom border
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The borderBottom property returns a String, representing the width, style and/or color of the bottom border of an element.




PreviousNext

Related