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.

Corner scale

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.

Role radii

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.

Choosing a value

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.

Tokens

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.

Related

See Button for product and marketing Button radii, Card for panel corners, and Input for field corners.