The border-bottom-style property sets the bottom border style.
Possible values include solid, dashed, dotted, and others.
A border-style value is required for any border to display.
A dashed border-bottom-style.
<style>
.border-dashed {
padding: 15px;
border-bottom-style: dashed;
}
</style>
<div class="border-dashed">
A dashed border-bottom-style
</div>
If no border-bottom-color is specified, the color will inherit from the text.
If no border-bottom-width is specified, the width will be medium width or 1px.
border-bottom-style: none | hidden | dotted | dashed |
solid | double | groove | ridge |
inset | outset | initial | inherit;
| Value | Description |
|---|---|
| none | Default. No border |
| hidden | Same as none except for table, it conflicts on the resolution |
| dotted | Dotted border |
| dashed | Dashed border |
| solid | Solid border |
| double | Double border |
| groove | 3D groove border |
| ridge | 3D ridge border |
| inset | 3D inset border |
| outset | 3D outset border |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-bottom-style values.
<style>
.border-bottom-example {
padding: 10px 0;
border-color: firebrick;
border-bottom-width: 3px;
border-bottom-style: dotted;
}
</style>
<div class="border-bottom-example">
border-bottom-style: dotted
</div>
This table shows when border-bottom-style support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
5.5 | Jul 2000 |
 Opera
|
9.2 | Apr 2007 |
 Safari
|
1.0 | Jun 2003 |
