The border-style property sets the style of the border.
It accepts one to four values for top, right, bottom, and left style.
A border-style value is required for any border to display.
A dashed border-style.
<style>
.border-dashed {
padding: 20px;
border-style: dashed;
}
</style>
<div class="border-dashed">
border-style: dashed
</div>
border-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-style values.
<style>
.border-example {
padding: 20px;
border-width: 3px;
border-color: firebrick;
border-style: dotted;
}
</style>
<div class="border-example">
border-style: dotted
</div>
The previous example only use a single value for their border style. To see different borders styles
on an element click the multiple border-style values.
<style>
.border-example-multiple {
padding: 20px;
border-width: 3px;
border-color: steelblue;
border-style: dotted solid;
}
</style>
<div class="border-example-multiple">
Multiple borders
</div>
Borders are applied according to the number of values specified in the border-style property.
This table shows when border-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 |
