Border Radius

Consistent border radius tokens for rounded corners across all components.

lg (default)

Code

Usage

// Basic usage
<div className="rounded-lg">Large radius</div>
<div className="rounded-sm">Small radius</div>
<div className="rounded-full">Full circle</div>

// CSS Variable (default)
:root {
  --radius: 0.75rem; /* 12px */
}

// Computed values
rounded-sm = calc(var(--radius) - 4px) /* 8px */
rounded-md = calc(var(--radius) - 2px) /* 10px */
rounded-lg = var(--radius) /* 12px */

Reference

Radius Scale

rounded-none

No rounding

0px

rounded-sm

Subtle rounding

8px

rounded

Default rounding

4px

rounded-md

Medium rounding

10px

rounded-lg

Large rounding (default)

12px

rounded-xl

Extra large rounding

16px

rounded-2xl

2x large rounding

20px

rounded-3xl

3x large rounding

24px

rounded-full

Full circle/pill

9999px

Default Value

rounded-lg (default)

CSS Variable:

--radius: 0.75rem (12px)

Usage Guidelines

When to Use

Use small radius (sm, default) for buttons, input fields, and small interactive elements. Use medium to large radius (md, lg) for cards, modals, and containers. Use extra large radius (xl, 2xl) for prominent elements and hero sections.

Use rounded-full for avatars, badges, and pill-shaped elements. The default radius (rounded-lg) is calculated from the --radius CSS variable, making it easy to theme your entire design system.

Best Practices

Use rounded-lg as the default for most components
Smaller radius (sm) for inputs and buttons
Larger radius (xl, 2xl) for cards and modals
Use rounded-full sparingly for avatars and badges
Maintain consistency within component types

Rhetoric-ds