Show a visible focus ring

Never remove the outline without a replacement; use :focus-visible.

Vercel Labsweb-interface-guidelines
Use `:focus-visible` over `:focus` (avoid focus ring on click)
command.mdView source ↗

From web-design-guidelines, Focus States section.

Tab through a form

Click above the panes, then press Tab.

outline: noneBad
Forgot password?

:focus { outline: none }
:focus-visible ringGood
Forgot password?

outline: 2px solid; outline-offset: 2px

:focus vs :focus-visible

Click a button with the mouse, then press Tab.

:focusBad

The quick brown fox

button:focus { outline: 2px solid }
:focus-visibleGood

The quick brown fox

button:focus-visible { outline: 2px solid }

Group focus with :focus-within

Type, then Tab to the filter and press Enter.

Rings on the partsBad
    .search :focus-visible { outline }
    Ring on the groupGood
      .search:focus-within { outline }

      Why it matters, pros and cons

      Why it matters

      For keyboard users the ring is the cursor; :focus-visible spares clicks.

      Pros

      • Meets WCAG 2.4.7 at almost no cost.
      • outline survives forced-colors mode.
      • :focus-within rings a compound control once.

      Cons

      • Text inputs match :focus-visible on click too.
      • A group ring alone hides which part has focus.
      • Check ring contrast (3:1) in both themes.