The Style borderBottomColor property in HTML DOM is used to set or return the color of bottom border of an element.
Syntax:
- It returns the borderBottomColor property.
object.style.borderBottomColor
- It is used to set the borderBottomColor property.
object.style.borderBottomColor = "color|transparent|initial| inherit"
Property Values:
- color: It specifies the bottom border color of corresponding element. The default color is black.
- transparent: It sets the bottom border color of corresponding element to transparent.
- initial: It sets the borderBottomColor property to its default value.
- Inherit: This property is inherited from its parent element.
Return Value: It returns a string which represents the color of bottom border of an element.
Example 1: This example changes the color of bottom border to black.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Style borderBottomColor Property
</title>
<style>
#GFG_Div {
width: 400px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body align="center">
<div id="GFG_Div">
<h1>GeeksforGeeks</h1>
<h2>
DOM Style borderBottomColor Property
</h2>
<p>
Click to change the bottom border
color of an element
</p>
</div>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<!-- Script to use Style borderBottomColor
Property -->
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderBottomColor = "blue";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
Example 2: This example changes the color of bottom border to transparent value.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Style borderBottomColor Property
</title>
<style>
#GFG_Div {
width: 400px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body align="center">
<div id="GFG_Div">
<h1>GeeksforGeeks</h1>
<h2>
DOM Style borderBottomColor Property
</h2>
<p>
Click to change the bottom border
color of an element
</p>
</div>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<!-- Script to use Style borderBottomColor
Property -->
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderBottomColor = "transparent";
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by Style borderBottomColor Property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Article Tags :
Recommended Articles