---
system: radix
category: design-systems
topic: radius
content_type: guidance
status: latest
version_label: "Radix Themes 3.x"
retrieved: 2026-05-13
source_url: https://www.radix-ui.com/themes/docs/theme/radius
tags: [radius, tokens, css-variables, shape, radix]
---

# 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:

```jsx
<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:

```css
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:

```css
.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:

```jsx
<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) |