border-style

This property is a shorthand that defines the line style of all the borders of an element.

Syntax

border-style is a shorthand for border-top-style, border-right-style, border-bottom-style and border-left-style. Anywhere from one to four values can be set with this shorthand, with each value setting the value for top, right, bottom and left respectively. If only one value is specified, it applies to all four borders. If the third and/or fourth values aren’t specified, their values are replicated from the first and second values respectively. One of the following styles are accepted: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

/* Setting one style for all borders */
border-style: dotted;

/* Setting top and bottom borders to dashed, left and right to double */
border-style: dashed double;

/* Setting top to solid, right to dashed, bottom to hidden.
This will result in the left border being dashed as well */
border-style: solid dashed hidden;

/* Setting all four borders individually */
border-style: hidden dotted double dashed;

Values

none
No border will be used, this is the default value.

hidden
Same effect as none with the exception that this value resolves some border-conflicts in tables.

dotted
The border will be a dotted line.

dashed
The border will be made of dashes.

solid
The border will be a solid line.

double
The border will be made of a double line.

groove
Specifies a “3D” groove border to be used.

ridge
Specifies a “3D” ridged border to be used.

inset
Specifies a “3D” inset border to be used.

outset
Specifies a “3D” outset border to be used.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-style? Submit a codepen.io demo and we'll showcase it here ↴