Radius

Source: radix-ui.com/themes/docs/theme/radius

Radix Themes has a single radius setting on the <Theme> component that controls border-radius across all components. All radius tokens are recalculated when this setting changes — custom components can participate via the provided CSS variables.

---

Theme-level radius setting

The radius prop configures the global radius factor:

<Theme radius="medium">
  <MyApp />
</Theme>

Value	Character
none	0px — sharp corners throughout
small	Subtle rounding
medium	Balanced rounding (default)
large	More pronounced rounding
full	Maximum rounding — pills and circles

The resulting pixel value for each component is contextual: it differs by component type. When set to full, buttons become pill-shaped, but checkboxes maintain some rounding to avoid visual confusion with radio buttons.

---

CSS variable tokens

Six radius tokens are derived from the radius scale. Their values are recalculated when the global radius setting changes:

var(--radius-1)       /* smallest */
var(--radius-2)
var(--radius-3)
var(--radius-4)
var(--radius-5)
var(--radius-6)       /* largest */

var(--radius-factor)  /* the theme's radius multiplier */
var(--radius-full)    /* fully rounded — use with CSS max() */
var(--radius-thumb)   /* thumb elements on sliders and interactive controls */

Using these variables in custom components ensures they scale consistently with the theme setting:

.custom-card {
  border-radius: var(--radius-3);
}

.custom-pill {
  border-radius: var(--radius-full);
}

---

Component-level overrides

Many components accept their own radius prop to override the global theme setting for that instance:

<Button radius="full">Pill button</Button>
<TextField.Root radius="none">Sharp field</TextField.Root>
<Badge radius="small">Tag</Badge>

Components that do not expose a radius prop (panel-based components like Card, Dialog, Popover, and text-focused elements) inherit directly from the theme setting.

---

Comparison with other systems

System	Approach
Radix	Single global radius prop → contextual per-component values; 6 CSS variable steps
Material 3	ShapeKeyTokens — 5 named shape families (none, extra-small, small, medium, large, extra-large, full) mapped per component
Carbon	border-radius defined per component in component tokens; no global radius prop
Atlassian	border.radius.* semantic tokens (default, small, normal, large, circle)