Border Radius
Border radius definitions for consistent rounded corners and shapes.
Radius Scale
Radius XS (Square)
…
Radius SM
…
Radius MD
…
Radius LG
…
Radius XL
…
Radius Full (Pill)
…
Outliers
Not part of the shared 6-step core scale. Kept only for a few large display frames — prefer the scale above for everything else.
Radius 2XL
…
Large display frames
Radius 3XL
…
Demo cards
Radius 4XL
…
Phone mockup frame
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)
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.