Corner Radius

Overview

The Corner Radius system defines how rounded every element looks across Create UI. It's built in two layers: 11 static radius tokens from 0px to a full 9999px, and responsive tokens that step down automatically across desktop, tablet, and mobile. Every component references a token, so rounding stays consistent and easy to update.

When should you use them?

Use radius tokens any time you round a corner, from a subtle 2px on an input to a full pill or circle. Instead of typing pixel values, apply a named token so rounding stays consistent across components and scales correctly on smaller screens.

How should you use them?

• Reference static radius tokens (none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, or full) instead of hardcoded pixel values.
• Match the radius to the component scale: smaller for inputs and badges, larger for cards and modals.
• Apply rounded/full (9999px) for perfect circles and pill shapes, regardless of element size.
• Use responsive radius tokens when an element should round less on tablet and mobile.
• Let responsive tokens step down one level per breakpoint automatically (3xl on desktop, 2xl on tablet, xl on mobile).