CSS border-width property
The border-width property in CSS asserts the border width of the border of an element. Each of the sides may be set distinctively using border-top-width, border-bottom-width, border-right-width and the border-left-width property.
Syntax for border-width property:
Following is the syntax for the border-width property.
border-width: medium|thin|thick|length|initial|inherit;
Example: CSS border-width property
Here in the example below, we are using the border-width property with different border colors, border styles, and different values. In this case, we have given the border-width of the object using all the values of this property.
<!DOCTYPE html>
<html>
<head>
<title>Border-width property in CSS</title>
<style type="text/css">
#sval {
border: ridge #ccc;
border-width: 6px;
}
#bival {
border: solid gray;
border-width: 2px 10px;
}
#treval {
border: dotted blue;
border-width: 0.3em 0 9px;
}
#fourval {
border: solid pink;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}
</style>
</head>
<body>
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p>
</body>
</html>
Output:
Example 2: CSS border-width property
Here in the example below, we are using the border-width property with different border colors, border styles, and their different values. In this case, we have given the border-width of the object using the top, right, bottom, and left values of this property.
<!DOCTYPE html>
<html>
<head>
<title>Border-width property in CSS</title>
<style type="text/css">
div{
background-color: gray;
border-color: red;
}
.border-box{
border-style: dashed;
border-width: 1px 2em 0 4rem;
writing-mode: horizontal-tb;
border-color: solid red;
}
</style>
</head>
<body>
<div class="border-box">Border-width property using the top | right | bottom | left values</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
2 |
2 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
3 |
3 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-width is medium. This property is applicable to all elements and also to ::first-letter. It is not an inherited property. The computed value for all the properties of the border-width property is the absolute length or zero. And the animation type of all the constituent properties of this property is length.
