LAST UPDATED: JUNE 17, 2021
CSS border-top Property
CSS border-top property is a shorthand property that is identified for setting all the properties of the top border of an element. The border-top property always sets the values of all the properties which it can set even if they are not specified. Because the default value for the border-top-style property is none, hence, not specifying the border-style part may result in no border.
Syntax for the border-top Property
Following is the syntax for the border-top property.
border-top: border-width border-style border-color|initial|inherit;
Example: CSS border-top Property
Here in the example below, we are using the border-top property with different border colors, and their different values. In this case, we have given the border-top of the object as 4 px dashed green. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-top property in CSS</title>
<style type="text/css">
div {
border-top: 4px dashed green;
background-color: red;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>This box has a border on the top side.</div>
</body>
</html>
Output:
Example 2: CSS border-top Property
Here in the example below, we are using the border-top property with different border colors, and their different values. In this case, we have given the border-top of the object as the global value- inherit. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Border-top property in CSS</title>
<style type="text/css">
div {
border-top: inherit;
border-style: dashed;
border-color: red;
background-color: green;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>This box has a border on the top side.</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 which 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 |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
This property is applicable to all the elements. It is also applicable to the ::first-letter. It is not an inherited property. The computed value for the border-top property is the absolute length or zero in case the border-top-style is none or hidden, for the border-top-style property is the as specified one and the border-top-color property is the computed color.
