/

HTML / CSS / JavaScript Tutorial

CSS Property: border-width

[this page | pdf | back links]

The CSS (CSS1) border-width property sets the width of an element’s four borders. You should always specify the border-style property before this property, as an element must have a border before you can change its characteristics. The individual border widths can be set separately using border-bottom-width, border-left-width, border-right-width and border-top-width. As with some other aggregate edge properties, up to four parameter values can be supplied (and if more than one is supplied then the properties are applied to individual borders as described here).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

length

Any specified thickness as a CSS length

medium

(default value). Medium width

thick

Thick width

thin

Thin width

 

Default Value:

medium

JavaScript syntax:

e.g. object.style.borderWidth="10px 10px"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {border: thin solid red;width: 200px}
p.x1 {border-width: thick;}
p.x3 {border-style: dashed;}
</style>
</head>
<body>
<p>Element 1: a paragraph with a border (thin, solid, red)</p>
<p class="x1">Element 2: a paragraph with a thick border</p>
<p id="x2">Element 3: as per Element 2 but set using JavaScript</p>
<p class="x3">Element 4: impact of using a parameter with two values (thick medium)</p>

<script>
document.getElementById("x2").style.borderWidth = "thick";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderWidth() {
  var x = document.createElement("DIV"); x.style.borderWidth = "thick"; return (window.getComputedStyle(x, null).borderWidth == "thick");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile