Javascript Reference - HTML DOM Style borderBottomColor Property

The borderBottomColor property sets or gets the the bottom border's color from an element.

Browser Support


`borderBottomColor`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderBottomColor property:

var v = object.style.borderBottomColor

Set the borderBottomColor property:

object.style.borderBottomColor='color|transparent|initial|inherit'

Property Values

Value	Description
color	Set the color for the bottom border. Default color is black
transparent	Set color of the bottom border to transparent
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Technical Details

Default Value:	black
Return Value:	A string value for the an element's bottom border's color
CSS Version	CSS1

Example

The following code shows how to change the bottom border's color.


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

The code above is rendered as follows:

Example 2

The following code shows how to get the bottom border's color.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-bottom:thick solid green">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<p>Check the Javascript console windows for the result.</p>
<script>
function myFunction() {<!-- w  w  w .  j  a  v a  2  s  .co  m-->
    console.log(document.getElementById("myDiv").style.borderBottomColor);
}
</script>

</body>
</html>

The code above is rendered as follows: