The border-bottom-style property in CSS is used to define the style of the bottom border of an element. It controls how the bottom border is displayed, such as solid, dotted, or dashed.
- It supports values like solid, dashed, dotted, double, groove, etc.
- The border is visible only when a style other than none or hidden is applied.
- It is commonly used with border-bottom-width and border-bottom-color for complete styling.
Syntax:
border-bottom-style: none|hidden|dotted|dashed|
solid|double|groove|ridge|inset|
outset|initial|inherit;
Property Values:
- none: It is the default value and it makes the width of the bottom border zero. Hence, it is not visible.
- hidden: It is used to make the bottom border invisible. It is similar to none value except in the case of border conflict resolution of table elements.
- dotted: It makes the bottom border with a series of dots.
- short-line: It makes the bottom border with a series of short-line segments.
- solid: It is used to make the bottom border with a single solid line segment.
- double: It makes the bottom border to double a solid line. In this case, the border width is equal to the sum of the widths of the two-line segments and the space between them.
- groove: It makes the bottom border with a grooved line segment, which makes feel that it is going inside.
- inset: It makes the bottom border with an embedded line segment, which makes feel that it is fixed deeply on the screen.
- outset: It is the opposite of inset. It makes the bottom border with a line segment, which appears to be coming out.
- initial: It sets the border-bottom-style property to its default value.
- inherit: The border-bottom-style property to be inherited from its parent element.
Example: Here, we are using border-style; none; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: none;
}
</style>
</head>
<body>
<!-- border-bottom-style:none; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output: 
Example: Here, we are using border-style: hidden; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: hidden;
}
</style>
</head>
<body>
<!-- border-bottom-style:hidden; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Example: Here, we are using border-style: dotted; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: dotted;
}
</style>
</head>
<body>
<!-- border-bottom-style:dotted; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output: 
Example: Here, we are using border-style: dashed; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: dashed;
}
</style>
</head>
<body>
<!-- border-bottom-style:dashed; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Example: Here, we are using border-style: solid; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: solid;
}
</style>
</head>
<body>
<!-- border-bottom-style:solid; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Example: Here, we are using border-style: double; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: double;
}
</style>
</head>
<body>
<!-- border-bottom-style:double; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output: 
Example: Here, we are using border-style: groove; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-bottom-style */
border-bottom-style: groove;
}
</style>
</head>
<body>
<!-- border-bottom-style:groove; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Example: Here, we are using border-style: inset; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-bottom-style */
border-bottom-style: inset;
}
</style>
</head>
<body>
<!-- border-bottom-style:inset; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Example: Here, we are using border-style: outset; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-bottom-style */
border-bottom-style: outset;
}
</style>
</head>
<body>
<!-- border-bottom-style:outset; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output: 
Example: Here, we are using border-style: initial; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: initial;
}
</style>
</head>
<body>
<!-- border-bottom-style:initial; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Example: Here, we are using border-style: inherit; property.
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style Property
</title>
<!-- Internal CSS Style Sheet -->
<style>
div {
border-bottom-style: double;
}
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property | border-bottom-style */
border-bottom-style: inherit;
}
</style>
</head>
<body>
<div>
<!-- border-bottom-style: inherit; -->
<h1>GeeksForGeeks</h1>
</div>
</body>
</html>
Output: 