# Radius

Softness on demand. Corner rounding comes from one scale and a small set of role radii, so a button, a card, and an input stay recognizable across every screen.

<h2 id="purpose">Corner scale</h2>

The scale runs from `none` through `3xl` to `full`. Small steps keep dense controls crisp, large steps soften panels and cards, and `full` produces a pill.

<h2 id="anatomy">Role radii</h2>

Components do not read the raw scale. Product Buttons read `--bd-r-btn`. Single-line fields read `--bd-r-input`. Marketing Buttons default to `--bd-r-pill`. An explicit `shape` prop can override that default. Chips read `--bd-r-pill`. Badges read `--bd-r-full`. Cards read `--bd-r-card`, and floating panels read `--bd-r-panel`.

Graphite Light and Graphite Dark use the Ledger profile: 5 px buttons and inputs, 8 px cards, 6 px panels, and 4 px items. Blueprint Light and Blueprint Dark use the roomier Rounded profile.

<h2 id="usage">Choosing a value</h2>

Pick the role radius that matches what the element is, not the value that looks right in isolation. Nested surfaces read best when the inner radius is smaller than the outer one. Do not hardcode a pixel value in a component.

<h2 id="tokens">Tokens</h2>

`BD_TOKENS.radius` holds the scale and `BD_RADIUS` holds the role profile. Pass `radius` overrides to `Provider` or to `bdBuildCssVars` when a product needs squarer or rounder corners; components keep reading the resulting `--bd-r-*` variables.

<h2 id="related">Related</h2>

See [Button](/docs/components/button) for product and marketing Button radii, [Card](/docs/components/card) for panel corners, and [Input](/docs/components/input) for field corners.