Draw focus rings with outline

Outline follows the radius and takes no space, so layout never shifts.

Sam Selikoff@samselikoff
So happy browsers support border-radius on outline now. Makes designing focus states with Tailwind such a delight 😌 Just use `outline` utilities until it looks right (including rounding without disturbing existing layout), then grab 'em all and throw `focus:` in front!
Dec 8, 2023View on X ↗

1 · Tab through the controls

Press Tab, or Focus next, and watch the shift readout.

Border ringBad
border: 1px → 2pxShift0px
Outline ringGood
outline: 2pxShift0px
.control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;     /* follows border-radius, takes no space */
}
/* Tailwind: focus-visible:outline-2 focus-visible:outline-offset-2 */

Why it matters, pros and cons

Why it matters

Browsers now curve an outline to border-radius. It paints outside the box, so nothing around the control moves.

Pros

  • One rule gives a rounded ring on buttons, inputs and pills alike.
  • No layout shift, so neighbours stay put as focus moves.
  • Tune it in the browser, then prefix every utility with focus-visible:.

Cons

  • Old browsers draw a square outline, so check your support floor.
  • Outline can be clipped by an ancestor with overflow: hidden.
  • A ring on the border alone stays inside the box and can't float with an offset.