The border-style shorthand CSS property sets the line style for all four sides of an element's border. /* 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: revert;
border-style: revert-layer;
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> Describes the style of the border. It can have the following values: Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side's border-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.Try it
Constituent properties
Syntax
Values
Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side's border-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.
dottedDisplays 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.
dashedDisplays 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.
solidDisplays a single, straight, solid line.
doubleDisplays two straight lines that add up to the pixel size defined by border-width.
grooveDisplays a border with a carved appearance. It is the opposite of ridge.
ridgeDisplays a border with an extruded appearance. It is the opposite of groove.
insetDisplays 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.
outsetDisplays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
Formal definition
as each of the properties of the shorthand:
|
| all elements. It also applies to ::first-letter. |
| no |
as each of the properties of the shorthand:
|
| discrete |
Formal syntax
border-style =
<line-style>{1,4}
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Examples
All property values
Here is an example of all the property values.
HTML
<pre class="b1">none</pre> <pre class="b2">hidden</pre> <pre class="b3">dotted</pre> <pre class="b4">dashed</pre> <pre class="b5">solid</pre> <pre class="b6">double</pre> <pre class="b7">groove</pre> <pre class="b8">ridge</pre> <pre class="b9">inset</pre> <pre class="b10">outset</pre>
CSS
pre { height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; } /* 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
| CSS Backgrounds and Borders Module Level 3 # border-style |
Browser compatibility
BCD tables only load in the browser
See also
- The border-related shorthand CSS properties: border, border-width, border-color, border-radius