Focus Styles & Outlines in CSS
From the CSS cheat sheet · Borders, Shadows & Effects · verified Jul 2026
Focus Styles & Outlines
Accessible focus indicators for keyboard navigation
css
/* Custom focus ring */
button:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Remove default, add custom */
button:focus { outline: none; }
button:focus-visible {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}💡 Use :focus-visible instead of :focus — it only shows the ring for keyboard users, not mouse clicks
⚡ :focus-within styles a parent when ANY child inside it has focus — perfect for form groups
📌 Never remove focus outlines without providing an alternative — keyboard users need them
🟢 outline-offset creates a gap between the element and the focus ring for a cleaner look
focusoutlineaccessibility