The border-style
shorthand CSS property sets the line style for all four sides of an element's border.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
/* top and bottom | left and right */
border-style: dotted solid;
/* top | left and right | bottom */
border-style: hidden double dashed;
/* top | right | bottom | left */
border-style: none solid dotted dashed;
/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;
The border-style
property may be specified using one, two, three, or four values.
- When one value is specified, it applies the same style to all four sides.
- When two values are specified, the first style applies to the top and bottom, the second to the left and right.
- When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
Each value is a keyword chosen from the list below.
Values
<line-style>
- Describes the style of the border. It can have the following values:
none
Like the hidden
keyword, displays no border. Unless abackground-image
is set, the computed value of the same side'sborder-width
will be0
, even if the specified value is something else. In the case of table cell and border collapsing, thenone
value has the lowest priority: if any other conflicting border is set, it will be displayed.hidden
Like the none
keyword, displays no border. Unless abackground-image
is set, the computed value of the same side'sborder-width
will be0
, even if the specified value is something else. In the case of table cell and border collapsing, thehidden
value has the highest priority: if any other conflicting border is set, it won't be displayed.dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's border-width
.dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. solid
Displays a single, straight, solid line. double
Displays two straight lines that add up to the pixel size defined by border-width
.groove
Displays a border with a carved appearance. It is the opposite of ridge
.ridge
Displays a border with an extruded appearance. It is the opposite of groove
.inset
Displays a border that makes the element appear embedded. It is the opposite of outset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likegroove
.outset
Displays a border that makes the element appear embossed. It is the opposite of
inset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likeridge
.
Formal definition
Initial value |
as each of the properties of the shorthand:
|
Applies to | all elements. It also applies to ::first-letter .
|
Inherited | no |
Computed value |
as each of the properties of the shorthand:
|
Animation type | discrete |
Formal syntax
<line-style>{1,4}where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Examples
Table with all property values
Here is an example of all the property values.
HTML
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
CSS
/* Define look of the table */
table {
border-width: 3px;
background-color: #52E396;
}
tr, td {
padding: 2px;
}
/* border-style example classes */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'border-style' in that specification. | Candidate Recommendation | No change. |
CSS Level 2 (Revision 1)The definition of 'border-style' in that specification. | Recommendation | Adds hidden keyword value.
|
CSS Level 1The definition of 'border-style' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-style
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1 Full support 1 Notes' Prior to Firefox 50, border styles of rounded corners were always rendered as if |
IE
Full support 4 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 3 |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' Prior to Firefox 50, border styles of rounded corners were always rendered as if |
Opera Android
Full support 14 |
Safari iOS
Full support 3 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
See also
- The border-related shorthand CSS properties:
border
,border-width
,border-color
,border-radius
border-style by Mozilla Contributors is licensed under CC-BY-SA 2.5.