Tailwind CSS - Border Radius

Modern Guide to Tailwind CSS: Border Radius

Tailwind’s rounded-* utilities provide a simple and powerful way to apply rounded corners to your elements. From subtle softening of edges to creating perfect circles, these classes are a staple of modern UI design.

Core Border Radius Utilities

You can apply a radius to all corners, specific sides, or even individual corners.

Class Prefix	Example	Description
rounded-{size}	rounded-lg	Applies the same radius to all four corners.
rounded-{side}-{size}	rounded-t-lg	Applies radius to specific sides. t (top), b (bottom), l (left), r (right).
rounded-{corner}-{size}	rounded-tl-lg	Applies radius to individual corners. tl (top-left), tr (top-right), bl (bottom-left), br (bottom-right).

The {size} can be sm, md, lg, xl, 2xl, 3xl, or full for a perfect circle/pill shape.

Logical Properties (-s, -e)

Best Practice: For internationalization (supporting left-to-right and right-to-left text), it’s recommended to use logical properties: rounded-s-* (start) and rounded-e-* (end). These automatically flip in RTL languages. rounded-s-lg is equivalent to rounded-l-lg in LTR and rounded-r-lg in RTL.

Component Showcase

Let’s build a few common UI components to see how different radius utilities are used in practice.

<div class="p-8 bg-slate-100 font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start">

    <!-- 1. Buttons -->
    <div class="space-y-4">
        <h3 class="font-semibold text-lg">Buttons</h3>
        <button class="px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700">Medium Radius</button>
        <button class="px-6 py-3 bg-green-600 text-white font-semibold rounded-full shadow-md hover:bg-green-700">Pill Shape</button>
    </div>

    <!-- 2. Avatar -->
    <div class="space-y-4 text-center">
        <h3 class="font-semibold text-lg">Avatars</h3>
        <img src="/path/to/avatar.jpg" alt="User Avatar" class="w-24 h-24 mx-auto object-cover rounded-full border-4 border-white shadow-lg">
    </div>

    <!-- 3. Cards with different corner rounding -->
    <div class="space-y-4">
        <h3 class="font-semibold text-lg">Cards</h3>
        <div class="bg-white shadow-lg rounded-xl p-6">
          <p>A card with a large, uniform radius (`rounded-xl`).</p>
        </div>
        <div class="bg-white shadow-lg rounded-t-xl p-6">
          <p>A card with rounding only on the top (`rounded-t-xl`).</p>
        </div>
    </div>

    <!-- 4. Input Fields -->
    <div class="space-y-4">
        <h3 class="font-semibold text-lg">Input Fields</h3>
        <input type="text" placeholder="Default radius" class="w-full p-2 border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
        <input type="text" placeholder="No radius" class="w-full p-2 border border-slate-300 rounded-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
    </div>

    <!-- 5. Message Bubbles -->
    <div class="space-y-4">
        <h3 class="font-semibold text-lg">Chat Bubbles</h3>
        <div class="bg-blue-500 text-white p-3 rounded-t-2xl rounded-bl-2xl max-w-xs">
          <p>Hi there! This uses multiple individual corner classes.</p>
        </div>
    </div>

  </div>
</div>

Customizing Your Radii

You can easily add your own border-radius scale to your tailwind.config.js to match your project’s design system.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        '4xl': '2rem', // 32px
        '5xl': '2.5rem', // 40px
      }
    }
  }
}

After rebuilding, you can use classes like rounded-4xl in your HTML.

Common Pitfalls

• Overflowing Content: If a child element inside a rounded container doesn’t respect the parent’s curves (e.g., an <img> tag at the very top), its sharp corners can poke out. Solve this by applying overflow-hidden to the rounded parent container.
• Border Collapse in Tables: When applying rounded corners to a table with collapsed borders, the rounding may not appear. A common fix is to use border-separate and manage borders on the <td> and <th> elements.