The DOM style borderBottom property is used to set or return the three different border-bottom properties such as border-bottom-width, border-bottom-style, and border-bottom-color of an element.
Syntax:
- It returns the borderBottom Property.
object.style.borderBottom
- It is used to set the borderBottom property.
object.style.borderBottom = "width style color|initial|inherit"
Parameter:
- width: It holds the width of the bottom border.
- style: It sets the bottom border style.
- Color: Sets the color of the bottom border.
- Initial: Sets the property as its default.
- inherit: Inherit the property from its parent.
Return Value: It returns a string value that represents the width, style, and/or color of the bottom border of an element.
Example: In this example, we are using borderBottom property.
HTML
<!DOCTYPE html><html>
<head>
<title>DOM Style borderBottom Property </title>
</head>
<body>
<center>
<h1 style="color:green;width:50%;" id="sudo">
GeeksForGeeks
</h1>
<h2>DOM Style borderBottom Property </h2>
<br>
<button type="button" onclick="geeks()">
Submit
</button>
<script>
function geeks() {
document.getElementById("sudo").style.borderBottom
= "thick solid green";
}
</script>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we are using borderBottom property.
html
<!DOCTYPE html><html>
<head>
<title>DOM Style borderBottom Property</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style borderBottom Property </h2>
<h3 style="border:2px solid red;
width:50%;" id="sudo">
geeksforgeeks
</h3>
<br>
<button type="button" onclick="geeks()">
Submit
</button>
<script>
function geeks() {
document.getElementById("sudo").style.borderBottom
= "thick dotted green";
}
</script>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM Style borderBottom property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Safari 1.0 and above