borderWidth Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderWidth

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. borderWidth

Description

The borderWidth property sets or gets the width of an element's border.

This property can take from one to four values:

  • If one value is specified, it sets all four border sides.
  • If two values are specified, the first value sets the top and bottom border, while the second value sets the right and left sides border.
  • If three values are specified, the first value sets the top border, the second value sets the right and left border, and the third value applies to the bottom border.
  • If four values are specified, each value sets the border individually in the order of top, right, bottom, and left.

Property Values

Value Description
thina thin border
medium a medium border. This is default
thick a thick border
length width of the border in length units
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: medium?
Return Value: A String, representing the width of an element's border
CSS VersionCSS1

Get the width of the four borders of a <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<div id="myDiv" style="border:1px solid black">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Return the width of the border</button>

<script>
function myFunction() {/* ww  w.j  a va  2  s .  c  om*/
    console.log(document.getElementById("myDiv").style.borderWidth);
}
</script>

</body>
</html>

Related Tutorials