Tailwind CSS Academy · Lesson

Border Radius and Rounded Corners

Round element corners with rounded-sm through rounded-full, and control individual corners with rounded-tl-*, rounded-br-*, etc.

Rounded Corners in Tailwind

Rounded corners are one of the most frequently applied visual styles in modern UI design. They soften hard edges and make interfaces feel more approachable. Tailwind's rounded-* utilities apply CSS border-radius with a consistent naming scale from barely perceptible rounding to perfect circles. They work on any element and compose with borders, shadows, and backgrounds.

<!-- Rounded corner scale preview -->
<div class="flex gap-3 flex-wrap">
  <div class="w-16 h-16 bg-blue-200 rounded-sm">sm</div>
  <div class="w-16 h-16 bg-blue-300 rounded">base</div>
  <div class="w-16 h-16 bg-blue-400 rounded-md">md</div>
  <div class="w-16 h-16 bg-blue-500 rounded-lg">lg</div>
  <div class="w-16 h-16 bg-blue-600 text-white rounded-xl">xl</div>
  <div class="w-16 h-16 bg-blue-700 text-white rounded-2xl">2xl</div>
  <div class="w-16 h-16 bg-blue-800 text-white rounded-3xl">3xl</div>
</div>

The rounded Scale

Tailwind's rounded scale provides semantic names that correspond to progressively larger radii: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), and rounded-3xl (24px). Larger values like rounded-xl and rounded-2xl are common for cards and modals in contemporary design systems.

<!-- Cards using common rounded values -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-white border p-4 rounded-md shadow-sm">
    rounded-md (6px)
  </div>
  <div class="bg-white border p-4 rounded-xl shadow-md">
    rounded-xl (12px)
  </div>
  <div class="bg-white border p-4 rounded-2xl shadow-lg">
    rounded-2xl (16px)
  </div>
</div>

All lessons in this course

← Back to Tailwind CSS Academy