Border Radius

Border radius utilities for rounded corners.

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.

Class	Value	CSS	Usage
.rounded-none	0	border-radius: 0;	Square corners
.rounded-sm	4px	border-radius: 4px;	Tight rounding
.rounded	6px	border-radius: 6px;	Standard rounding
.rounded-lg	8px	border-radius: 8px;	Comfortable card radius
.rounded-xl	12px	border-radius: 12px;	Soft, modern surfaces
.rounded-2xl	16px	border-radius: 16px;	Display containers
.rounded-full	9999px	border-radius: 9999px;	Pills and circles

Pattern	Covers	Typical suffixes
.rounded-{size}	All four corners	none, sm, base, lg, xl, 2xl, full
.rounded-t-{size}, .rounded-r-{size}, .rounded-b-{size}, .rounded-l-{size}	One side only	sm, base, lg, xl
.rounded-tl-{size}, .rounded-tr-{size}, .rounded-br-{size}, .rounded-bl-{size}	One corner only	sm, 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.

Related Utilities

Border Width

Border width utilities

Border Style

Border style utilities