CSS border-top-width Proeprty
CSS border-top-width property is used to set the width of the top border of an element. Since a specification does not define the exact thickness for each keyword, the result while using one of them, is implementation-specific. And they always follow the pattern- thin<= medium <= thick and the values remain constant in a single document.
Syntax for the border-top-width Property
Following is the syntax for the border-top-width property.
<line-width>where <line-width> = <length> | thin | medium | thick
Example: CSS border-top-width
Here in the example below, we are using the border-top-width property with different border width, border styles, colors and their different values. In this case, we have given the border-top-width as 'thick' i.e; the borderline will be thick at the top of the container. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-top-width property in CSS</title>
<style type="text/css">
div {
border: 1px solid purple;
margin: 1em 0;
}
div:nth-child(1) {
border-top-width: thick;
}
div:nth-child(2) {
border-top-width: 2em;
}
</style>
</head>
<body>
<div>Element 1</div>
<div>Element 2</div>
</body>
Output:
Example 2: CSS border-top-width
Here in the example below, we are using the border-top-width property with different border width, border styles, colors and their different values. In this case, we have given the border-top-width as 2ex i.e; the border line will be of a width of 2ex at the top of the container. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-top-width property in CSS</title>
<style type="text/css">
div {
border: 1px solid blue;
margin: 1em 0;
}
.border-box {
border-top-width: 2ex;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
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.3 |
2.3 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-top-width property is medium. This property is applicable to all elements and also to ::first-letter. It is not an inherited property. The computed value for the border-top-width property is the absolute length or zero in case the border-top-style is 'none' or hidden. The animation type for this property is length.
