Things to watch when replacing

• Text inputs match :focus-visible even when clicked with a mouse. If you also removed the ring on inputs with outline: none, replacing it makes the ring appear on clicks too.
• The browser’s default focus ring already follows the same rules as :focus-visible. If you don’t need a custom ring, just removing outline: none is enough.
• Give a custom ring a contrast of at least 3:1 against the background (WCAG 2.1 Success Criterion 1.4.11).
• In Safari, the Tab key doesn’t move to buttons or links unless “Press Tab to highlight each item on a webpage” is turned on in the Advanced settings. Turn it on when you check button focus rings in Safari.

Fallback

All five target browsers support it, so :focus-visible alone is normally enough. If you also have to support older browsers, put the ring on :focus and remove it with :focus:not(:focus-visible). Browsers that don’t know :focus-visible ignore the whole second rule, so they fall back to showing the ring.

button:focus {
  outline: 2px solid #06c;
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}