# Radius and Shadow

Radius and shadow feed Tailwind’s own theme keys, so the classes stay Tailwind’s. Read this for the scales, and for the focus ring’s two static classes.

Radius and shadow are passthroughs, which means we feed our tokens into
Tailwind’s native `--radius-*` and `--shadow-*` theme keys and the classes stay
Tailwind’s own with Mirror’s scale behind them. Per-corner variants, arbitrary
values and editor completion all work exactly as they do everywhere else.

## Radius

::component-preview{name="RadiusPreview"}
```html
<button class="rounded-component-md">Control</button>
<section class="rounded-surface-md">Container</section>
```
::

Component radii size controls such as buttons, inputs, checkboxes and chips,
and run from `rounded-component-2xs` through `rounded-component-2xl`, with the
tighter `rounded-component-compact-sm` through `-compact-xl` alongside them and
`rounded-component-round` for a pill.

Surface radii size containers instead, as `rounded-surface-sm`, `-md` and
`-lg`, each with an `-inset` partner.

A rounded container with padding needs a smaller radius on its children, or the
corners visibly diverge. The `-inset` step is the container’s radius minus the
container’s inset, so nested corners stay concentric.

```html
<div class="rounded-surface-md p-2">
  <img class="rounded-surface-md-inset" src="…" />
</div>
```

## Shadow

There are three elevations, each of which takes its colour from a shadow-ink
token, so a theme that softens the ink softens every elevation at once.

::component-preview{name="ShadowPreview"}
```html
<div class="shadow-component">Card</div>
<div class="shadow-component-high">Popover</div>
<div class="shadow-surface">Sheet</div>
```
::

::docs-table
---
columns:
  - label: Class
  - label: Use
rows:
  - items:
      - label: shadow-component
      - label: Resting controls and cards.
        plaintext: true
  - items:
      - label: shadow-component-high
      - label: Raised chrome such as popovers and menus. Two layers.
        plaintext: true
  - items:
      - label: shadow-surface
      - label: Whole surfaces such as sheets and dialogs.
        plaintext: true
---
::

::warning
`shadow-component/50` compiles and does nothing. Tailwind implements the alpha
modifier by parsing the theme value into layers and rewriting each layer’s
colour, and our keys hold a single `var()` with nothing to parse, so it sets
`--tw-shadow-alpha` and never applies it. The class exists, the build passes,
and the shadow renders at full strength. Soften the shadow *ink* instead, or
write the shadow yourself with an arbitrary value.
::

## The focus ring

The focus ring has exactly one shape, so it ships as a single static class
rather than a family.

::component-preview{name="FocusRingPreview"}
```html
<button class="border-2 outline-4 outline-transparent focus-visible:focus-ring">
  Ringed on focus
</button>
```
::

```css
.focus-ring {
  border-color: var(--app-color-focus-border);
  border-width: var(--app-dimension-border);
  outline-color: var(--app-color-focus-outline);
  outline-width: var(--app-dimension-outline-focus);
  outline-style: solid;
}
```

Because the class sets a border width and an outline width alongside their
colours, reserve both at rest, as the button above does with `border-2` and
`outline-4 outline-transparent`. Leave them out and the control gains a 2px
border the moment it takes focus, nudging its neighbours along, and animates
its outline out of whatever `currentColor` happens to be.
[Styling](/components/styling#how-the-four-combine) shows the same reservation on
a full control.

Both the colour and the width come from tokens, which means an app can’t style
the ring down to nothing while still using the class.

`focus-shadow` draws the same ring with two box shadows instead, for elements
whose border or outline is already doing something else. It needs no reserved
border and shifts nothing.

```css
.focus-shadow {
  box-shadow:
    inset 0 0 0 var(--app-dimension-border) var(--app-color-focus-border),
    0 0 0 var(--app-dimension-outline-focus) var(--app-color-focus-outline);
}
```