HTML Dog
Skip to navigation

CSS Property: border-style

The style of the border of a box.

With one value, the border-style property can be used to specify a uniform style border around a box. With two, three, or four values, sides can be specified independently.

Possible Values

ValueDescription
none

No border.

solid

Solid line.

dotted

Series of dots.

dashed

Series of dashes.

double

Two solid lines.

groove

Representation of a carved groove. Opposite of ridge.

ridge

Representation of an embossed ridge. Opposite of groove.

inset

Representation of an inset depression. Opposite of outset.

outset

Representation of an outset extrusion. Opposite of inset.

hidden

Used with tables. Same as none, except where there are conflicting borders.

inherit
initial
unset

Multiple Values

One, two, three, or four space-separated values:

ValueNoteExample
[value][top, right, bottom, and left]solid
[value] [value][top and bottom] [left and right]solid none
[value] [value] [value][top] [right and left] [bottom]solid double dashed
[value] [value] [value] [value][top] [right] [bottom] [left]solid dotted dashed double

Example


.lamprey{ border-style: solid; }
/* Uniform solid border on all four sides. */

.salmon { border-color: dotted dashed; }
/* Top and bottom borders are dotted. Left and right borders are dashed. */

.sturgeon { border-color: double solid dotted; }
/* Top border is double. Left and right borders are solid. Bottom border is dotted. */

.goldfish { border-color: solid dotted dashed double; }
/* Top border is solid. Right border is dotted. Bottom border is dashed. Left border is double. */

Browser support