border-style

This property is a shorthand for the following CSS properties:

• border-bottom-style
• border-left-style
• border-right-style
• border-top-style

/* 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;

Theborder-styleproperty may be specified using one, two, three, or four values.

• Whenonevalue is specified, it applies the same style toall four sides.
• Whentwovalues are specified, the first style applies to thetop and bottom,the second to theleft and right.
• Whenthreevalues are specified, the first style applies to thetop,the second to theleft and right,the third to thebottom.
• Whenfourvalues are specified, the styles apply to thetop,right,bottom,andleftin that order (clockwise).

Each value is a keyword chosen from the list below.

<line-style>

Describes the style of the border. It can have the following values:

none

Like thehiddenkeyword, displays no border. Unless abackground-imageis set, the computed value of the same side'sborder-widthwill be0,even if the specified value is something else. In the case of table cell and border collapsing, thenonevalue has thelowestpriority: if any other conflicting border is set, it will be displayed.

hidden

Like thenonekeyword, displays no border. Unless abackground-imageis set, the computed value of the same side'sborder-widthwill be0,even if the specified value is something else. In the case of table cell and border collapsing, thehiddenvalue has thehighestpriority: 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'sborder-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 byborder-width.

groove

Displays a border with a carved appearance. It is the opposite ofridge.

ridge

Displays a border with an extruded appearance. It is the opposite ofgroove.

inset

Displays a border that makes the element appear embedded. It is the opposite ofoutset.When applied to a table cell withborder-collapseset tocollapsed,this value behaves likeridge.

outset

Displays a border that makes the element appear embossed. It is the opposite ofinset.When applied to a table cell withborder-collapseset tocollapsed,this value behaves likegroove.

border-style =
<line-style>{1,4}

<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset

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

• The border-related shorthand CSS properties:border,border-width,border-color,border-radius