Skip to main content

​
Overview

Radius utilities shape corners across buttons, cards, fields, and media. They work with border width, style, and color utilities, but can also be used on borderless surfaces.
ClassValueCSSUsage
.rounded-none0border-radius: 0;Square corners
.rounded-sm4pxborder-radius: 4px;Tight rounding
.rounded6pxborder-radius: 6px;Standard rounding
.rounded-lg8pxborder-radius: 8px;Comfortable card radius
.rounded-xl12pxborder-radius: 12px;Soft, modern surfaces
.rounded-2xl16pxborder-radius: 16px;Display containers
.rounded-full9999pxborder-radius: 9999px;Pills and circles
PatternCoversTypical suffixes
.rounded-{size}All four cornersnone, sm, base, lg, xl, 2xl, full
.rounded-t-{size}, .rounded-r-{size}, .rounded-b-{size}, .rounded-l-{size}One side onlysm, base, lg, xl
.rounded-tl-{size}, .rounded-tr-{size}, .rounded-br-{size}, .rounded-bl-{size}One corner onlysm, base, lg, xl

​
Basic Example

Use the base rounded-* classes to soften every corner equally. 
<div class="rounded-sm"></div>
<div class="rounded"></div>
<div class="rounded-lg"></div>
<div class="rounded-xl"></div>

​
Rounding Sides Separately

Use side-specific radius helpers when two adjacent corners should share the same rounding. 
<div class="rounded-t-lg"></div>
<div class="rounded-r-lg"></div>
<div class="rounded-b-lg"></div>
<div class="rounded-l-lg"></div>

​
Rounding Corners Separately

Use corner-specific helpers when only one corner needs a special treatment. 
<div class="rounded-tl-lg"></div>
<div class="rounded-tr-lg"></div>
<div class="rounded-br-lg"></div>
<div class="rounded-bl-lg"></div>

​
Best Practices

  • Use one or two radius sizes across a page so surfaces feel related.
  • rounded and rounded-lg cover most interface needs.
  • Use side-only rounding for drawers, pills, and surfaces docked to another edge.
  • Use corner-only rounding for badges, cropped media, and asymmetric decorative treatments.
  • Reach for rounded-full on pills, avatars, and circular badges.
  • Pair larger radius values with generous padding so corners feel intentional.

Border Width

Border width utilities

Border Style

Border style utilities