Tailwind Border Radius Utilities

What Are Border Radius Utilities?

rounded-* utilities map to the CSS border-radius property, offering a scale from rounded-sm (barely rounded) to rounded-full (fully circular or pill-shaped, depending on the element's aspect ratio).

Rounded corners are one of the fastest ways to make an interface feel modern and approachable, and Tailwind's consistent scale keeps rounding uniform across buttons, cards, and inputs.

<img class="h-16 w-16 rounded-full" src="/avatar.jpg" alt="User avatar" />
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white">Rounded Button</button>

rounded-full on a square image creates a perfect circle; rounded-lg softens the button's corners.

Border Radius Syntax

class="rounded-sm | rounded | rounded-md | rounded-lg | rounded-xl | rounded-full"
class="rounded-t-lg | rounded-r-lg | rounded-b-lg | rounded-l-lg"
class="rounded-tl-lg | rounded-tr-lg | rounded-bl-lg | rounded-br-lg"

• rounded-* sets radius on all four corners at once.
• Side variants (rounded-t-*, rounded-r-*) round both corners on one side.
• Corner variants (rounded-tl-*, rounded-br-*) round a single specific corner.
• rounded-full creates a perfect circle on square elements, or fully pill-shaped edges on rectangles.

Border Radius Cheatsheet

The full rounding scale and common shape patterns.

Circles vs Pill Shapes

rounded-full produces different visual results depending on the element's shape: on a square element (equal width and height), it creates a perfect circle. On a wide rectangular element, it creates a pill/capsule shape instead.

<img class="h-12 w-12 rounded-full" src="/avatar.jpg" alt="" /> <!-- circle -->
<span class="rounded-full bg-blue-100 px-4 py-1 text-blue-800">Pill Badge</span> <!-- pill -->

Rounding Only Specific Corners

When combining elements visually, like a search input attached to a button, or a card with a flat-bottomed image and rounded card corners, per-corner rounding utilities let you round exactly the corners that need it.

<div class="flex">
  <input class="rounded-l-lg border border-r-0 px-3 py-2" placeholder="Search..." />
  <button class="rounded-r-lg bg-blue-600 px-4 py-2 text-white">Go</button>
</div>

The input rounds only its left corners and the button rounds only its right corners, so together they look like one seamless control.

Rounded Images Need overflow-hidden

As covered in the Overflow lesson, applying rounded-* directly to an <img> works fine, but if the image is wrapped in a container div that also needs rounding (for a border or overlay), remember to add overflow-hidden to the wrapper.

<div class="overflow-hidden rounded-xl">
  <img class="h-48 w-full object-cover" src="/banner.jpg" alt="" />
</div>

Common Mistakes

• Applying rounded-full to a non-square element expecting a circle, and getting a pill shape instead.
• Forgetting overflow-hidden on a rounded wrapper div, so its child image ignores the rounded corners.
• Mixing inconsistent radius values across similar components (some rounded-md, others rounded-lg) without a clear system.
• Not adjusting per-corner rounding when merging two adjacent elements into a single visual control.
• Using excessive rounding (rounded-2xl or higher) on small UI elements like checkboxes, which can look disproportionate.

Key Takeaways

• Border radius utilities scale from rounded-none to rounded-full, matching a consistent design scale.
• rounded-full creates circles on square elements and pills on rectangular elements.
• Per-side and per-corner utilities allow precise rounding for merged or adjacent UI elements.
• Rounded wrapper containers need overflow-hidden to properly clip rounded child content.
• Standardizing radius values (e.g. always rounded-lg for cards) keeps a design system visually consistent.