Radius^jsp

shadcn's radius chain – 6, 8, 10 and 14 – and two roles on top of it: rounded-control for anything you press or type in, rounded-container for anything that holds content.

Foundation

Source: tokens/semantic/radius.json
Base: --radius 10px

Two roles
rounded-control (8) and rounded-container (14). Pages use these, not the steps.
shadcn matches
shadcn's own rounded utilities point at the same primitives, so both tiers agree.
Borders
Widths of 1 and 2: border-width.default and strong.

Scale

none · 0px

sm · 6px

md · 8px

lg · 10px

xl · 14px

full · 9999px

Steps

The primitives, with the shadcn utility that reads each. Page code never uses these.

radius.none0px0px – square corners.
radius.sm6pxrounded-sm6px. shadcn rounded-sm.
radius.md8pxrounded-md8px. shadcn rounded-md.
radius.lg10pxrounded-lg10px. shadcn rounded-lg (its --radius).
radius.xl14pxrounded-xl14px. shadcn rounded-xl.
radius.full9999pxPill or circle.

Roles

What page code and the JSP tier use.

rounded-default10px

10px. shadcn's --radius; only read directly by Sonner's toasts.

rounded-control8px

8px. Corners of buttons, inputs and other controls.

rounded-container14px

14px. Corners of cards, panels and dialogs.

In use

Controls take the control radius, the card the container radius.

Card

shadcn’s Card uses the container radius.

Nested surfaces inside a card use the control radius so corners sit concentric.

Borders

Border widths, and the colours that go with them (see Colour → Borders and focus).

border-width.0 · 0px

border-width.1 · 1px

border-width.2 · 2px

border-width.default · 1px

border-width.strong · 2px