Javascript Reference - HTML DOM Style borderWidth Property
The borderWidth property sets or gets the width of an element's border.
border-width can have one to four values.
border-width:thin medium thick 10px;
is equal to
- top border is thin
- right border is medium
- bottom border is thick
- left border is 10px
border-width:thin medium thick;
is equal to
- top border is thin
- right and left borders are medium
- bottom border is thick
border-width:thin medium;
is equal to
- top and bottom borders are thin
- right and left borders are medium
border-width:thin;
is equal to all four borders are thin.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
borderWidth |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the borderWidth property:
var v = objectstyle.borderWidth
Set the borderWidth property:
object.style.borderWidth='thin|medium|thick|length|initial|inherit'
Property Values
| Value | Description |
|---|---|
| thin | thin border |
| medium | medium border. Default |
| thick | thick border |
| length | Set the thickness of the border |
| inherit | Inherit the border width from the parent element |
Technical Details
| Default Value: | medium |
|---|---|
| Return Value: | A string representing the width of an element's border |
| CSS Version | CSS1 |
Example
The following code shows how to change the width of the four borders of a <div> element
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- www .ja 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.borderWidth = "thick";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to change the width of the top and bottom border to thick, and the left and right border to thin of a <div> element.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- 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.borderWidth = "thick thin";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to change the width of the four borders of a <div> element, using the length value.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- ww w .ja v a2s .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.borderWidth = "1px 5px 10px 20px";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 4
The following code shows how to get the width of the border of a <div> element.
<!DOCTYPE html>
<html>
<body>
<!--from ww w .j ava 2 s . co m-->
<div id="myDiv" style="border:1px solid black">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
console.log(document.getElementById("myDiv").style.borderWidth);
}
</script>
</body>
</html>
The code above is rendered as follows: