Easy Tutorial
❮ Met Win Focus Prop Link Rev ❯

Style borderBottomColor Property


Definition and Usage

The borderBottomColor property sets or returns the color of the bottom border of an element.

Syntax

Set the borderBottomColor property:

Return the borderBottomColor property:

Tip: The borderBottomColor property has no default value.

Value Description
color Specifies the color of the bottom border. In CSS Color Values
transparent The bottom border color is transparent (the underlying content will show through).
inherit The bottom border color is inherited from the parent element.

Browser Support

All major browsers support the borderBottomColor property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if the !DOCTYPE is specified. IE9 supports "inherit".


Example

Change the color of the bottom border:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
#ex1{
    border: 1px solid #FF0000;
}
</style>
<script>
function displayResult(){
    document.getElementById("ex1").style.borderBottomColor="#00FF00";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change bottom border color</button>

</body>
</html>

❮ Met Win Focus Prop Link Rev ❯