The border-style
CSS property is a shorthand property that sets the line style for all four sides of an element's border.
/* Keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | 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.
Each value is a keyword chosen from the list below.
<line-style>
none | Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the none 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 a background-image is set, the calculated value of border-top-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the hidden 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 calculated border-top-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 or border-top-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 with border-collapse set to collapsed , this value behaves like groove . | |
outset | Displays a border that makes the element appear embossed. It is the opposite of |
<line-style>{1,4}where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Here is an example of all the property values.
<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>
/* 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;}
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The 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 1 The definition of 'border-style' in that specification. | Recommendation | Initial definition. |
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1
|
4 | 3.5 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 3 | ? | 12 | 4
|
Yes | 3 | ? |
border
, border-width
, border-color
, border-radius
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style