CSS border-top-style property
The border-top-style property in CSS is identified for setting the line style of the top border of an element. The specification doesn't define how borders of different styles connect in the corners.
The border-top-style property is specified as a single keyword that is selected from the ones available for the border-style property.
Syntax for border-top-style property
border-top-style: none | dotted | dashed | solid | groove | inset | outset | ridge | double | hidden | initial | inherit;
Example: CSS border-top-style property
Here in the example below, we are using the border-top-style property with different border styles, border colors, and their different values. In this case, we have given the border-top-style as none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset i.e; the borderline will be arranged at the top of the container with different styles.
<!DOCTYPE html>
<html>
<head>
<title>Border-top-style property in CSS</title>
<style type="text/css">
table {
border-width: 3px;
background-color: pink;
}
tr, td {
padding: 3px;
}
.b1 {border-top-style: none;}
.b2 {border-top-style: hidden;}
.b3 {border-top-style: dotted;}
.b4 {border-top-style: dashed;}
.b5 {border-top-style: solid;}
.b6 {border-top-style: double;}
.b7 {border-top-style: groove;}
.b8 {border-top-style: ridge;}
.b9 {border-top-style: inset;}
.b10 {border-top-style: outset;}
</style>
</head>
<body>
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
</body>
</html>
Output:
Example 2: CSS border-top-style property
Here in the example below, we are using the border-top-style property with different border styles, border colors, and their different values. In this case, we have given the border-top-style as dotted i.e; the border line will be arranged at the top of the container in a dotted fashion.
<!DOCTYPE html>
<html>
<head>
<title>Border-top-style property in CSS</title>
<style type="text/css">
.border-box {
border-top-style: dotted;
background-color: blue;
height: 90px;
width: 90px;
border-color: green;
}
.div {
padding: 1px;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</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 |
5.5 |
5.5 |
| Opera |
9.2 |
9.2 |
| Safari |
1 |
1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-top-style property is none. This property is applicable to all elements and also to ::first-letter. It is not an inherited property. The computed value for this property is the specified one. The animation type of this property is discrete.
