Radius
Radius rounds a control at 4px, a Card or a Dialog at 6px, and an item inside a control or a menu at 2px.
Scale
The steps are multiples of --radius, which tokens.css sets to 0.25rem.
Components use the first four steps and rounded-full. In the specimen, each row reads the radius from a component’s corner.
| Utility | Multiplier | Radius | Purpose |
|---|---|---|---|
rounded-sm | 0.5 | 2px | A Kbd, the dot of a Badge, and the image in the Item component |
rounded-md | 0.5 | 2px | An item inside a control or a popup: a menu row, a tab, the option of a Segmented Control, and a Sidebar item. A Tooltip also uses it. |
rounded-lg | 1 | 4px | A control, a Badge, a chip, an Alert, and a popup such as a menu or a Popover |
rounded-xl | 1.5 | 6px | A Card, a Dialog, an Alert Dialog, and a toast |
rounded-2xl | 2 | 8px | No component |
rounded-3xl | 2.5 | 10px | No component |
rounded-4xl | 3 | 12px | No component |
rounded-full is Tailwind’s own utility and doesn’t read --radius. An Avatar, a Switch, a radio, the thumb of a Slider, and a Progress bar use it. An Avatar with shape="square" uses rounded-lg.
Rules
The components follow these rules. Apply them when you build a surface outside the registry or override a component’s corner with a class.
Control Sizes
Keep one corner at every size of a control. A Button has a 4px radius at xs and at lg, and so does any other control that has sizes.
Nested Items
Round an item inside a control or a popup at 2px. A menu row, a tab, the option of a Segmented Control, and the xs Button and the Kbd inside an Input Group use rounded-md. These items are inside a 4px corner: a row is 4px from the edge of its menu, and an option is 3px from the edge of its track.
Screen Edges
Leave the edge against the screen square. A docked Sheet has square corners. A docked Drawer has a 6px radius on the two corners of its open edge. If floating is set, the Sheet or the Drawer is positioned 8px from the edges of the screen, and all four corners have a 6px radius.
Arbitrary Values
Reach a radius through its utility. A utility reads --radius, so a theme that changes the variable changes every corner in proportion. An arbitrary value, such as rounded-[5px], stays at 5px. See Theming for what tokens.css declares.
In Code
Name the step, not the pixel value. To round one side, use the logical utilities: rounded-s-lg and rounded-e-lg follow the reading direction.
<section className="rounded-xl bg-card p-4 ring-1 ring-foreground/10">
<ul className="rounded-lg bg-muted p-1">
<li className="rounded-md px-2 py-1.5">Atelier Brume</li>
</ul>
</section>