Backgrounds and Borders
Borders and Radius
Border utilities set width and color; rounded-* utilities set corner radius, from subtle to fully circular.
Borders
border adds a 1px border; border-2 makes it thicker. Set the color with border-{color}, and target one side with border-t, border-b etc.
Example
<div class="space-y-2">
<div class="border border-gray-300 p-4 rounded-lg">1px gray border</div>
<div class="border-2 border-sky-500 p-4 rounded-lg">2px sky border</div>
<div class="border-l-4 border-emerald-500 bg-emerald-50 p-4">Left accent border</div>
</div>Rounded corners
| Class | Radius |
|---|---|
| rounded | 0.25rem |
| rounded-lg | 0.5rem |
| rounded-xl | 0.75rem |
| rounded-2xl | 1rem |
| rounded-full | fully round (pill/circle) |
Example
<div class="flex items-center gap-3">
<span class="bg-sky-100 text-sky-700 px-4 py-1 rounded-full font-semibold">Pill</span>
<div class="w-12 h-12 bg-sky-500 rounded-full"></div>
</div>