Border Radius

Border radius values used to soften the corners of elements.

None

rounded-none

0px

Small

rounded-sm

0.125rem

Default

rounded

0.25rem

Medium

rounded-md

0.375rem

Large

rounded-lg

0.5rem

Extra Large

rounded-xl

0.75rem

2XL

rounded-2xl

1rem

3XL

rounded-3xl

1.5rem

Full

rounded-full

9999px

Usage Guidelines

Consistency: Stick to rounded-md or rounded-lg for most UI elements (cards, inputs, buttons) to maintain a cohesive look.

Full: Use rounded-full primarily for avatars, badges, or pill-shaped buttons.

Nesting: When nesting rounded elements, the inner radius should be smaller than the outer radius.