:focus-visible
Focus Ring (:focus-visible)
/ :focus-visible · :focus /
also called focus indicator, keyboard focus outline, focus halo
A focus ring identifies the element that will receive the next keyboard action. The :focus pseudo-class matches any focused element, while :focus-visible lets the browser show the strong indicator when the input modality or control needs it, most notably during keyboard navigation. Never remove the default outline without supplying an equally visible replacement.
Anatomy — every part, named
- 1Focus outline
outline“The blue line around the button after I press Tab” is the focus outline.
- 2Outline offset
outline-offset“The little gap between the control and its focus line” is the outline offset.
Prompt — paste into your agent
Style the keyboard focus ring with :focus-visible instead of suppressing the browser outline globally. Make it high contrast and clearly offset from the control; use :focus only for state that must apply regardless of whether focus came from keyboard or pointer.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | :focus-visible | |
| CSS | :focus | |
| HTML | tabindex |