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