Border: solid, dashed, dotted

border-style

Set the type of pen used to draw an element's border.

Property values

This property is used to set each of these four border style properties, which may also be set one by one:

This property expects anywhere from one to four values, with their interpretation as follows:

number of values sides effected
1 value Sets all four sides: top, right, bottom, left
2 values 1st value: top and bottom edges
2nd value: right and left edges
3 values 1st value: top edge
2nd value: right and left edges
3rd value: bottom edge
4 values 1st value: top edge
2nd value: right edge
3rd value: bottom edge
4th value: left edge

Choose one of these keywords for each value:

none Do not display an edge line
dotted Use a series of small dots as the edge line
dashed Use a series of short dashes as the edge line
solid Use an unbroken edge line
double Use two parallel unbroken edge lines (border-width must be at least 3px)

Or choose one of these special effects when specifying all four edges together (and when border-width is at least 2px):

outset A raised content appearance is created by adjusting the bottom and right edges to be slightly darker
inset A sunken content appearance is created by adjusting the top and left edges to be slightly darker
groove A raised border is created by adjusting half of each edge to be slightly darker
ridge A sunken border is created by adjusting the opposite halves of each edge to be slightly darker

Examples

/* solid borders on the top and bottom only */

border-style: solid none;
border-style

style > framing > border-styleBorder: solid, dashed, dotted

🔎