Entry 01

One focus ring with `:focus-visible`

Use it as the focus style for every interactive element. Never write outline: none.

Press Tab through the row. Each ring takes the color and size of its element. A mouse click on a button shows no ring, and a click into the input does.

Code CSS · 4 lines

:focus-visible {
  outline: max(2px, 0.08em) solid currentColor;
  outline-offset: 0.25em;
}

Why it works, the rules and the credits 3 reasons · 2 rules · support · credits

Why it works

The browser decides when a ring helps. Keyboard focus gets one, a mouse click on a button does not, and text inputs always do.
currentColor and em make the ring follow each component's color and size.
outline takes no layout space and survives forced-colors mode, which removes box-shadow.

Rules

On a filled button currentColor can fail contrast. Set the outline to the button's background color there.
A component that draws its ring with box-shadow keeps outline-color: transparent, never outline: none, so forced-colors mode can repaint it.

Support

Chrome: 86
Firefox: 85
Safari: 15.4

Credits

Borrowed from: Stephanie Eckles, Modern CSS Upgrades To Improve Accessibility, 2021-04-09, and Smol Focus Styles · Kevin Powell, 3 super small changes to improve your CSS, 2023-03-07

One focus ring with :focus-visible

Why it works

Rules

Support

Credits

One focus ring with `:focus-visible`