Using focus-visible

focus-visible lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator

Focus visible has been working across major browsers since March 2022. You can see which browsers and versions are compatible here.

Hide focus styles if they're not needed, for example, when an element receives focus via the mouse:

:focus:not(:focus-visible) {
  outline: 0;
}

Show focus styles on keyboard focus:

:focus-visible {
  outline: 3px solid blue;
}