HTML | DOM Style borderBottomWidth Property
The style borderBottomWidth property in HTML DOM is used to set or return the width of bottom border of an element.
Syntax:
- It is used to return the width of bottom border.
object.style.borderBottomWidth
- It is used to set the width of the bottom border.
border-bottom-width: "medium|thin|thick|length|initial|inherit";
Return Value: It returns bottom border width of selected element.
Property Values:
- medium: It sets the medium size bottom border. It is the default value.
- thin: It sets the thin border of the bottom.
- thick: It sets the thick bottom border.
- length: It sets the width of the border. It does not takes negative value.
- initial: It sets the borderBottomWidth property to its default value.
- inherit: This is used to inherits from its parent element.
Example 1: This example use thick value of borderBottomWidth property.
html
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderBottomWidth Property </title> <style> div { color: green; border: 1px solid green; text-align: center; } </style></head><body> <div id="main"> <h1>GeeksforGeeks.!</h1> </div> <br> <input type="button" value="Click Me.!" onclick="geeks()" /> <script> function geeks() { document.getElementById("main").style.borderBottomWidth = "thick"; } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Example 2: This example use thin value of borderBottomWidth Property.
html
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderBottomWidth Property </title> <style> div { color: green; border: 8px solid green; text-align: center; } </style></head><body> <div id = "main"> <h1>GeeksforGeeks.!</h1> </div> <br> <input type = "button" value = "Click Me.!" onclick = "geeks()" /> <script> function geeks() { document.getElementById("main").style.borderBottomWidth = "thin"; } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Supported Browsers: The browser supported by Style borderBottomWidth property are listed below:
- Google Chrome 1.0
- Edge 12
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Please Login to comment...