Change the width of the four borders of a <div> element:
document.getElementById("myDiv").style.borderWidth = "thick";
<!DOCTYPE html> <html> <head> <style> #myDiv {//from ww w . j a v a 2s . co m border-style: solid; } </style> </head> <body> <div id="myDiv">This is a div element.</div> <br> <button type="button" onclick="myFunction()">Change width of the four borders</button> <script> function myFunction() { document.getElementById("myDiv").style.borderWidth = "thick"; } </script> </body> </html>
The borderWidth property sets or gets the width of an element's border.
This property can take from one to four values:
| Value Count | Example | Description |
|---|---|---|
| One value | p {border-width: thick} | all four borders will be thick |
| Two values | p {border-width: thick thin} | the top and bottom border will be thick, left and right border will be thin |
| Three values | 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 | 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 |
Property Values
| Value | Description |
|---|---|
| thin | a thin border |
| medium | a medium border. default |
| thick | a thick border |
| length | The width of the border in length units |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The borderWidth property returns a String representing the width of an element's border.