Snippet · CSS

Add Accessible Focus Styles

Shared by Hiral solanki · September 17, 2026

3 views

1 upvote

#HTML/CSS

Adds a visible focus indicator for keyboard users while using :focus-visible to avoid unnecessary focus outlines for mouse interactions.

:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

Know a different way to do this? Add your approach as a variation so folks can compare them side by side.

Related snippets