Borders & Border Radius

Add borders with per-side control and round corners with the radius scale.

4 min read Level 1/5 #tailwind#effects

What you'll learn

Use border plus per-side width utilities
Color and style borders
Round corners with rounded-* including per-corner

Borders define edges and radius softens them. Both come with per-side and per-corner control so you rarely need custom CSS.

Width and Sides

border is a 1px all-around border; suffix it for a side and/or a width:

<div class="border border-gray-200">1px box</div>
<div class="border-t-2">Top accent rule</div>
<div class="border-b border-l-4">Mixed sides</div>

Color and Style

<div class="border-2 border-blue-500 border-dashed">Dashed callout</div>
<hr class="border-dotted border-gray-300" />

A v4 change worth knowing: the default border color is no longer a light gray — borders use currentColor unless you set a color. Always specify border-{color} explicitly so borders do not inherit your text color by surprise.

Radius

The radius scale runs from rounded-sm to rounded-3xl, plus rounded-full. Corners and sides can be targeted individually:

<div class="rounded-lg">Standard card corner</div>
<div class="rounded-t-xl rounded-bl-none">Mixed corners</div>
<img class="rounded-full size-12" />   <!-- avatar -->
<button class="rounded-full px-4 py-2">Pill button</button>

Divide & Ring →