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
Value | Description |
---|---|
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 | Representation of an embossed ridge. Opposite of |
inset | Representation of an inset depression. Opposite of |
outset | Representation of an outset extrusion. Opposite of |
hidden | Used with tables. Same as |
inherit | |
initial | |
unset |
Multiple Values
One, two, three, or four space-separated values:
Value | Note | Example |
---|---|---|
[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. */