Border Radius
Round corners with rounded utilities.
Syntax
class="rounded-lg rounded-full"Round corners with rounded and its sizes: rounded-sm, rounded-lg, rounded-2xl, and rounded-full for pills and circles.
Target specific corners with rounded-t-lg, rounded-br-xl, and so on.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer softens a card's corners by adding rounded-lg instead of writing border-radius: 0.5rem in CSS.
- A pill-shaped badge is created using rounded-full so the border radius equals half the element's height.
- A user avatar is displayed as a perfect circle using rounded-full on an equal-width-and-height image element.
More examples
Rounding scale
Tailwind's rounded scale progresses from rounded-sm (2px) through rounded-lg (8px) to rounded-full (50%), covering nearly every corner-rounding need.
<div class="flex gap-4 items-center flex-wrap">
<div class="bg-blue-200 w-16 h-16 rounded-sm"></div>
<div class="bg-blue-300 w-16 h-16 rounded"></div>
<div class="bg-blue-400 w-16 h-16 rounded-lg"></div>
<div class="bg-blue-500 w-16 h-16 rounded-2xl"></div>
<div class="bg-blue-600 w-16 h-16 rounded-full"></div>
</div>Pill badge with rounded-full
rounded-full creates a pill shape by setting border-radius: 9999px, which fully rounds short elements regardless of their dimensions.
<span class="bg-emerald-100 text-emerald-700 text-xs font-semibold px-3 py-1 rounded-full">
Active
</span>Selective corner rounding
rounded-l-lg and rounded-r-lg round only the left or right corners, creating a connected button group with rounded outer ends.
<div class="flex">
<button class="bg-gray-200 px-4 py-2 rounded-l-lg">Left</button>
<button class="bg-gray-300 px-4 py-2">Middle</button>
<button class="bg-gray-200 px-4 py-2 rounded-r-lg">Right</button>
</div>
Discussion