Javascript Reference - HTML DOM Style borderBottom Property








The borderBottom property sets or gets border-bottom properties in a shorthand form.

We can use borderBottom property to get and set the following properties:

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




Browser Support

borderBottom Yes Yes Yes Yes Yes

Syntax

Return the borderBottom property:

var v = object.style.borderBottom

Set the borderBottom property:

object.style.borderBottom=width style color|initial|inherit'

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.




Technical Details

Default Value: not specified
Return Value: A string representing the bottom border's width, style and color
CSS Version CSS1

Example

The following code shows how to add a bottom border to a <div> element.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w  w  w .  j a  va  2  s .co m-->
    document.getElementById("myDiv").style.borderBottom = "thick solid black";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the bottom border. 


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  w  ww.  j av a 2  s  .c  om-->
    border: thick solid blue;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderBottom = "thin dotted black";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the border-bottom property values.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-bottom:5px solid red;">This is a div element.</div>
<p>It outputs the style to the Javascript console.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w  w  w  .  ja  v a 2 s  . co  m-->
    console.log(document.getElementById("myDiv").style.borderBottom);
}
</script>
</body>
</html>

The code above is rendered as follows: