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:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
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;