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 width of the top border to zero. Hence, it is not visible.
Syntax:
border-top-style:none;
Example-1:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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
<!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
<!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
<!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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!