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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 Aug, 2022
Like Article
Save Article