CSS border-style

The border-style CSS property sets the style (solid, dashed, dotted...) of the four borders of an element. The same style may be assigned to the four borders or a different one for each, but all borders are set. To override the style of one border without affecting the rest use the border-style longhands: border-top-style, border-right-style, border-bottom-style and border-left-style.

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-style: solid;
border-style: solid dashed dotted double;   /* order: top right bottom left */
border-style: solid dashed dotted;          /* order: top right&left bottom */
border-style: solid dashed;                 /* order: top&bottom right&left */

Note the order of the styles, starting with the top border.

Browser Support: Full.

Usage

Use border-style to set or override the four border styles at once.

.example {
border-color: green; border-width: 10px; border-style: solid dashed dotted double;
}

The above is equivalent to:

border-top: 10px solid green;
border-right: 10px dashed green;
border-bottom: 10px dotted green;
border-left: 10px double green;

See border longhands for more.

The Border Styles

The following are the border styles available in CSS. dotted, dashed, solid and double use the exact color set by border-color or one of its longhands. groove, ridge, inset and outset use two colors of the same hue, one darker and one lighter than border-color, to achieve a 3D effect.

dotted
dashed
solid
double
groove
ridge
inset
outset

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>