Radius scales with element size. Smaller elements get tighter corners; larger elements get softer ones. This page lists the available tokens, explains how to pick the right one, and covers how to handle nested rounded containers.
Pick a radius based on the height of the element. As the element gets taller, the radius increases to keep corners proportional.
Tokens above 2xl (3xl, 4xl, 5xl) are not tied to a specific element height. Use them when you deliberately want a softer, more rounded look on larger decorative surfaces.
When nesting rounded elements, use this formula:
Outer radius = Inner radius + Padding
This keeps the inner and outer curves concentric. If you skip the math and reuse the same token for both, the gap between curves will look uneven — wider on the sides, pinched at the corners.
Correct
Inner lg (8px) + padding p={1} (4px) = outer 2xl (12px)Incorrect
Same 2xl on both creates an uneven gap — corners pinch while sides bulge
Another example
Inner lg (8px) + padding p={2} (8px) = outer 3xl (16px)