Style borderWidth Property
Style Object
Definition and Usage
The borderWidth property sets or returns the width of an element's border.
This property can take from one to four values:
- One value, like: p {border-width: thick} - all four
borders will be thick
- Two values, like: p {border-width: thick thin} - the
top and bottom border will be thick, left and right border will be thin
- Three values, like: p {border-width: thick thin medium}-
the top border will be thick, left and right border will be thin, bottom
border will be medium
- Four values, like: p {border-width: thick thin medium
10px} - the top border will be thick, right border will be thin, bottom
border will be medium, left border will be 10px
Syntax
Set the borderWidth property:
Object.style.borderWidth="thin|medium|thick|length|inherit"
Return the borderWidth property:
| Value |
Description |
| thin |
Defines a thin border |
| medium |
Defines a medium border. This is default |
| thick |
Defines a thick border |
| length |
The width of the border in length units |
| inherit |
The width of the border is inherited from the
parent element |
Browser Support

The borderWidth property is supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
Example
Example
Change the width of the four borders:
<html>
<head>
<style type="text/css">
#ex1
{
border: 1px solid #FF0000;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.borderWidth="thick thin";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change width of
the four
borders</button>
</body>
</html>
Try it yourself »
Style Object
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]