Border Width Color Radius in TailwindCSS
? Border Width, Color, and Radius in Tailwind CSS
Tailwind provides easy utilities to style borders including width, color, and radius for rounded corners.
1. Border Width (border, border-{side}-{width})
Set the width of borders on all or specific sides.
| Class | CSS Equivalent | Description |
|---|---|---|
border | border-width: 1px; | Border all sides 1px |
border-0 | border-width: 0; | No border |
border-2 | border-width: 2px; | 2px border |
border-4 | border-width: 4px; | 4px border |
border-8 | border-width: 8px; | 8px border |
Border side specific:
| Class | CSS Equivalent | Description |
|---|---|---|
border-t | border-top-width: 1px; | Top border |
border-b-4 | border-bottom-width: 4px; | Bottom border 4px |
border-l-2 | border-left-width: 2px; | Left border 2px |
border-r | border-right-width: 1px; | Right border |
2. Border Color (border-{color})
Set border colors from Tailwind’s color palette.
| Class | CSS Equivalent | Description |
|---|---|---|
border-black | border-color: #000; | Black border |
border-white | border-color: #fff; | White border |
border-gray-500 | border-color: #6b7280; | Gray shade border |
border-red-600 | border-color: #dc2626; | Red border |
border-blue-400 | border-color: #60a5fa; | Blue border |
| ... | ... | Many colors available |
Use arbitrary colors too:
<div class="border" style="border-color: #ff5733;"> Custom color border</div>3. Border Radius (rounded-*)
Control the roundness of corners.
| Class | CSS Equivalent | Description |
|---|---|---|
rounded-none | border-radius: 0; | No rounded corners |
rounded-sm | border-radius: 0.125rem; | Small rounding |
rounded | border-radius: 0.25rem; | Default rounding |
rounded-md | border-radius: 0.375rem; | Medium rounding |
rounded-lg | border-radius: 0.5rem; | Large rounding |
rounded-xl | border-radius: 0.75rem; | Extra large rounding |
rounded-2xl | border-radius: 1rem; | 2x Extra large rounding |
rounded-3xl | border-radius: 1.5rem; | 3x Extra large rounding |
rounded-full | border-radius: 9999px; | Fully rounded (circle) |
Rounded corners on specific sides:
| Class | CSS Equivalent | Description |
|---|---|---|
rounded-t | Round top-left & top-right | Round only top corners |
rounded-b-lg | Large rounding bottom corners | Round only bottom |
rounded-l-md | Medium rounding left corners | Round left only |
rounded-r-full | Fully rounded right corners | Round right only |
rounded-tl | Round top-left corner only | |
rounded-br | Round bottom-right corner only |
Example:
<div class="border-4 border-blue-500 rounded-lg p-4"> This div has a 4px blue border with medium rounded corners.</div>If you want examples with hover border colors or responsive border radius, just ask!
