Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

interactionsRauno

Draw Focus Rings with box-shadow

SHOULD

SHOULD: Draw focus rings with `box-shadow` (Tailwind `ring-*`), not `outline` — outline ignores `border-radius` before Safari 16.4, so rounded controls get a rectangle.

Build the focus ring out of box-shadow rather than outline, so it follows the border radius

:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }

Bad

Good

Why it matters

This is about the mechanism, not about having a ring at all. `outline` is painted outside the border box and, on any browser older than Safari 16.4, ignores `border-radius` entirely — so a pill or heavily rounded control gets a hard rectangle around it. `box-shadow` (Tailwind's `ring-*`) is clipped to the element's own radius in every engine, and it composes: you can stack a background-coloured offset shadow under a coloured ring to keep the focus state legible on any surface. Since plenty of users never update their OS, treat the box-shadow ring as the portable default.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.