# Radius and Padding

How corner radius pairs with padding, how nested corners stay parallel, and where content may bleed into the padding.

## Overview

Pick the radius of a container from the scale. The padding follows from the radius, so content sits clear of the curve.

## Scale

Web corners stop at `2xl` (16px). The `3xl` and `4xl` tokens alias to `2xl`. A padded container takes 1.5 times its radius as padding, and a size variant steps both values together.

* **Large (2xl):** Takes 24px of padding.
* **Medium (xl):** Takes 16px of padding.
* **Small (lg):** Takes 12px of padding.
* **List Popup (2xl):** Takes 6px of padding, so items round at 10px.

The ratio applies to surfaces, tiles, card fields, and overlays such as dialogs, drawers, popovers, and toasts.

**Do:** Pad a 16px corner by 24px, so content sits clear of the curve.

**Don't:** Pad a container by less than its radius. The content crowds the corner.

## Nested Corners

An inner element that follows the corner takes the outer radius minus the padding between them. At 1.5 times padding, that leaves nothing, so content in a padded container keeps its own shape.

Menus and listboxes are the exception. They keep 6px padding so their items stay concentric: the items of a 16px popup round at 10px.

**Do:** Round a 16px popup's items at 10px, the outer radius minus the 6px padding.

**Don't:** Repeat the outer radius on items. The gap at each corner looks uneven.

## Pills and Corner Controls

* **Pills and Indicators (full):** Pills, circles, and indicators keep their own shape and stay inside the container.
* **Corner Controls (First line):** A control such as the close button of a dialog aligns with the content beside it, not the corner.

## Bleed

* **Edge-Aligned Controls (Up to the padding):** Aligns the label of a control with the content edge.
* **Full-Bleed Content (Exactly the padding):** Rows and tables reach both edges of the container.

**Do:** Bleed a text button by its own padding, so "View all" lines up with "Balances".

**Don't:** Bleed a control past the padding to the container's edge.

## Scope

Height-sized controls, such as buttons, inputs, and selects outside the card variant, follow their height scale, not this ratio. Their radius steps with their size, so a small button keeps the `lg` radius in any container.

## Related

[Layout](/docs/foundations/layout)

Covers the radius, spacing, and shadow scales.

[Surface](/docs/components/surface)

Use for padded containers that step radius and padding together.

[Menu](/docs/components/menu)

Use for a list popup with concentric items.