Border
Control the border and border-radius properties.
Classes
| Class | Properties |
|---|---|
| .border | border: 1px solid; |
| .border-0 | border: 0; |
| .border-{1-4} | border: {0.0625rem|0.125rem|0.25rem|0.5rem} solid; |
| .border-{solid|dashed|dotted|none} | border-style: {solid|dashed|dotted|none}; |
| .border-{color}-{number} | border-color: {color}; |
| .radius-0 | border-radius: 0; |
| .radius-full | border-radius: 9999px; |
| .radius-{1-4} | border-radius: {0.25rem|0.5rem|0.75rem|1rem}; |
Variables
| Variable | Default Value |
|---|---|
| $borderWidths | 0.0625rem (1px), 0.125rem (2px), 0.25rem (4px), 0.5rem (8px) |
| $radii | 0.25rem (4px), 0.5rem (8px), 0.75rem (12px), 1rem (16px) |
.border
A shortcut for border: 1px solid;.
Border Width
Border Style
Border Color
See the colors section for more information about colors.
Border Radius
Specific Sides
You can specify each border property for a specific side by prefixing
the border property in the classname with one of the following:
t (top), b (bottom), l (left), r (right), y (top & bottom), x (left &
right).
For border radius, you can also specify the specific corner with
tl (top-left), tr (top-right), bl (bottom-left), br
(bottom-right).