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;.
xxxxxxxxxx1
<div class="border p-4 bg-gray-1"></div>Border Width
xxxxxxxxxx1
<div class="border-0 border-purple-2 mb-4 p-4 bg-gray-1"></div>2
<div class="border-1 border-purple-2 mb-4 p-4 bg-gray-1"></div>3
<div class="border-2 border-purple-2 mb-4 p-4 bg-gray-1"></div>4
<div class="border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>5
<div class="border-4 border-purple-2 p-4 bg-gray-1"></div>Border Style
xxxxxxxxxx1
<div class="border-solid border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>2
<div class="border-dashed border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>3
<div class="border-dotted border-3 border-purple-2 p-4 bg-gray-1"></div>Border Color
xxxxxxxxxx1
<div class="border-purple-2 border-3 mb-4 p-4 bg-gray-1"></div>2
<div class="border-green-4 border-3 mb-4 p-4 bg-gray-1"></div>3
<div class="border-red-6 border-3 p-4 bg-gray-1"></div>See the colors section for more information about colors.
Border Radius
xxxxxxxxxx1
<div class="radius-0 border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>2
<div class="radius-1 border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>3
<div class="radius-2 border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>4
<div class="radius-3 border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>5
<div class="radius-4 border-3 border-purple-2 mb-4 p-6 bg-gray-1"></div>6
<div class="radius-full border-3 border-purple-2 p-6 bg-gray-1"></div>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).
xxxxxxxxxx1
<div class="border-t-3 border-t-purple-2 border-t-dashed mb-4 p-4 bg-gray-1"></div>2
<div class="border-b-3 border-b-green-4 border-b-dotted mb-4 p-4 bg-gray-1"></div>3
<div class="border-x-3 border-x-red-6 p-4 bg-gray-1"></div>
For border radius, you can also specify the specific corner with
tl (top-left), tr (top-right), bl (bottom-left), br
(bottom-right).
xxxxxxxxxx1
<div class="radius-tl-full border-3 border-purple-2 mb-4 p-4 bg-gray-1"></div>2
<div class="radius-b-2 mb-4 p-4 border-3 border-purple-2 bg-gray-1"></div>3
<div class="radius-br-4 mb-4 p-4 border-3 border-purple-2 bg-gray-1"></div>