Border Radius

Border radius definitions for consistent rounded corners and shapes.

Radius Scale

Radius XS (Square)

4px

rounded-xs

Radius SM

10px

rounded-sm

Radius Default

10px

rounded

Radius MD

12px

rounded-md

Radius LG

16px

rounded-lg

Radius XL

24px

rounded-xl

Radius Full (Pill)

9999px

rounded-full

Component Applications

Card & Surface (rounded-lg)

Main containers and cards use rounded-lg (16px) for a balanced, modern look.

Input & Button (rounded-md)

Badge & Pill (rounded-full)

Badge 1Badge 2Badge 3

Icon Container (rounded-md or rounded-lg)

⚙️

Usage Guidelines

When to Use Rounded Corners

Use rounded corners on all interactive elements (buttons, inputs, cards) for a modern, approachable aesthetic. Avoid sharp corners on UI elements.

Consistency Across Components

Maintain consistent radius sizes: cards use rounded-lg, inputs use rounded-md, badges use rounded-full. This creates visual hierarchy.

Override When Necessary

While the scale should be your default, you can use custom border-radius values for specific design needs. Document these clearly in component comments.

Performance Consideration

Use CSS border-radius (not images or pseudo-elements) for the best performance. All values in this scale render efficiently.