Part 33: Border Radius (Rounded) & Pill Buttons

Modern user interfaces use rounded corners to feel soft and approachable.

1. The rounded-* Scale

• rounded-none: 0px
• rounded-sm: 2px
• rounded: 4px
• rounded-md: 6px
• rounded-lg: 8px
• rounded-xl: 12px
• rounded-2xl: 16px
• rounded-3xl: 24px
• rounded-full: 9999px (perfect circles and pill shapes)

2. Directional Corner Rounding

Round only specific corners: - rounded-t-2xl: Top corners only (great for bottom sheets and card headers). - rounded-l-lg: Left corners only (great for grouped button sets).

<!-- Segmented Button Control -->
<div class="inline-flex shadow-sm rounded-lg">
  <button class="px-4 py-2 bg-blue-600 text-white rounded-l-lg font-medium">Daily</button>
  <button class="px-4 py-2 bg-white text-slate-700 border-y font-medium">Weekly</button>
  <button class="px-4 py-2 bg-white text-slate-700 border rounded-r-lg font-medium">Monthly</button>
</div>

Key Takeaways

• Use rounded-2xl for modern cards and modals.
• Use rounded-full for circular avatars and pill-shaped badges.

In Part 34, we will explore the Tailwind Typography Plugin (@tailwindcss/typography & prose)!