Javascript Reference - HTML DOM Style borderBottomWidth Property
The borderBottomWidth property sets or
gets the width of the bottom border.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
borderBottomWidth |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the borderBottomWidth property:
var v = object.style.borderBottomWidth
Set the borderBottomWidth property:
object.style.borderBottomWidth=thin|medium|thick|length|initial|inherit
Property Values
| Value | Description |
|---|---|
| thin | thin border |
| medium | medium border. default |
| thick | thick border |
| length | set the thickness |
| inherit | inherit the border width from the parent element |
Technical Details
| Default Value: | medium; |
|---|---|
| Return Value: | A string representing the width of bottom border |
| CSS Version | CSS1 |
Example
The following code shows how to change the width of the bottom border.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w w w . ja v a 2 s. c o m-->
border-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myDiv").style.borderBottomWidth = "10px";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to change the width of the bottom border to thin.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from ww w . j a v a 2 s. co m-->
border-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myDiv").style.borderBottomWidth = "thin";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to get the width of the bottom border.
<!DOCTYPE html>
<html>
<body>
<!--from w w w . j av a 2s .c o m-->
<div id="myDiv" style="border-bottom:thick solid red">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
console.log(document.getElementById("myDiv").style.borderBottomWidth);
}
</script>
</body>
</html>
The code above is rendered as follows: