HTML | DOM Style borderBottomColor Property
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 >
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 >
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
Last Updated :
09 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...