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 >w3wiki</ 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 = "myBeginner()" > Click to change </ button > <!-- Script to use Style borderBottomColor Property --> < script > function myBeginner() { 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 >w3wiki</ 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 = "myBeginner()" > Click to change </ button > <!-- Script to use Style borderBottomColor Property --> < script > function myBeginner() { 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
Contact Us