CSS border-top-style Property
Last Updated :
26 Aug, 2024
The border-top style property is used to specify the style of the top border.
Syntax:
border-top-style: none | dotted | dashed | solid | groove | inset |
outset | ridge | double | hidden | initial | inherit;
Default Value: The default value is none.
Property Values
None: It is the default value and it makes the width of the top border zero. Hence, it is not visible. Syntax:
border-top-style:none;
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: none;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Output:
Dotted: It is used to make the top border with a series of dots. Syntax:
border-top-style:dotted;
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: dotted;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Output:
Dashed: It makes the top border with a series of short line segments. Syntax:
border-top-style:dashed;
Example 3:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: dashed;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Output:
Solid: It is used to make the top border with a single solid line segment. Syntax:
border-top-style:solid;
Example 4:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: solid;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Output:
Groove: It makes the top border with a grooved line segment, which makes us feel that it is going inside. Syntax:
border-top-style:groove;
Example 5:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: groove;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Output:
Inset: It makes the top border with an embedded line segment which makes us feel that it is fixed deeply on the screen. Syntax:
border-top-style:inset;
Example 6:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: inset;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Output:
Outset: It is the opposite of inset. It makes the top border with a line segment, which appears it to be coming out. Syntax:
border-top-style:outset;
Example 7:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: outset;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Output:
Ridge: It is the opposite of groove. It makes the top border with a ridged line segment, which makes us feel that it is coming out. Syntax:
border-top-style:ridge;
Example 8:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: ridge;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Output:
Double: It makes the top border with a double solid line. The border width, in this case, is equal to the sum of widths of the two-line segments and the space between them. Syntax:
border-top-style:double;
Example 9:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: double;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Output:
Hidden: It is used to make the top border invisible, like none, except in case of border conflict resolution of table elements. Syntax:
border-top-style:hidden;
Example 10:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: hidden;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Output:
Initial: It is used to sets the default value of the element. Syntax:
border-top-style:initial;
Example 11
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3 {
border-top-style: initial;
}
</style>
</head>
<body>
<h3>GeeksforGeeks </h3>
</body>
</html>
Output:
Inherit: It makes the top-border-style property to be inherited from its parent element. Syntax:
border-top-style:inherit;
Example 12
:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3 {
border-top-style: inherit;
}
body {
border-top-style: dotted;
}
</style>
</head>
<body>
<h3>GeeksforGeeks </h3>
</body>
</html>
Output:
Note:
This property is necessary while using border-top property.
Supported Browsers:
The browser supported by border-top-style Property are listed below:
- Google Chrome 1
- Edge 12
- Mozilla Firefox 1
- Internet Explorer 5.5
- Opera 9.2
- Safari 1