CSS border-top-style Property

Border-top-style

This property defines the style for the top border of an element.

Syntax -

Now we will see the meaning of the values mentioned above -

none	Specifies no border, it is the default value to the property.
hidden	The same as "none", except in border conflict resolution for table elements
dotted	Specifies a dotted border
dashed	Specifies a dashed border
solid	Specifies a solid border
double	Specifies a double border
groove	Specifies a 3D grooved border. The effect depends on the border-color value
ridge	Specifies a 3D ridged border. The effect depends on the border-color value
inset	Specifies a 3D inset border. The effect depends on the border-color value
outset	Specifies a 3D outset border.

Now we will see Example -

Example -

<!DOCTYPE html>
<html>

<head>
<style>
div {
border-width: 10px;
border-style: solid;
border-top-style: double;
}
</style>
</head>

<body>

<div>
Border-top-style
</div>
</body>

</html>

Output -

Example 2 - Here we will see all the remaining values of the property -

<!DOCTYPE html>
<html>

<head>
<style>
.one {
border-width: 10px;
border-style: solid;
border-top-style: double;
}
.two {
border-width: 10px;
border-style: solid;
border-top-style:dashed;
}
.three {
border-width: 10px;
border-style: solid;
border-top-style:groove;
}
.four {
border-width: 10px;
border-style: solid;
border-top-style:ridge;
}
.five {
border-width: 10px;
border-style: solid;
border-top-style:hidden;
}
</style>
</head>

<body>

<div class="one">
Border-top-style
</div>
<br>
<div class="two">
Border-top-style
</div>
<br>
<div class="three">
Border-top-style
</div>
<br>
<div class="four">
Border-top-style
</div>
<br>
<div class="five">
Border-top-style
</div>
</body>

</html>

Output -

Compatibility -

Compatible CSS version is also mentioned below -