Focus Ring
焦点环
Aliases:焦点环键盘焦点框键盘框蓝框聚焦框focus outlinefocus ring
What is it
A visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
Name disambiguation
A focus ring is not a hover highlight — focus serves keyboard users, hover serves pointer users.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Any focusable element — buttons, links, inputs, custom widgets
- Targeting :focus-visible rather than :focus so clicks stay clean
- After custom styles have overridden the browser default outline
✕ When not to use
- Removing outline: none without a replacement indicator
- Cloning the hover highlight so focus is only visible to the pointer
- Rings below 3:1 contrast, or clipped by neighbouring elements
Variants
Outline ring
外轮廓
outline plus outline-offset — universal, survives forced-colors
Shadow ring
阴影环
Layered box-shadow ring that hugs custom border-radius
Border tint
描边染色
Border-color only — weakest, needs a weight bump to pass
Implementation
:focus-visibleoutlineoutline-offsetBase recipe: `:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px }`. Switch to a two-layer `box-shadow` ring when you need it to hug custom radii. Never drop the default outline without a replacement; keep outline under forced-colors. Use `:focus:not(:focus-visible)` to strip click-only rings precisely.
Platform API
:focus-visibleoutlineoutline-offsetfocus()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| WCAG | 2.4.7 Focus Visible |
| CSS | :focus-visible |
Related concepts
Make every feature operable by keyboard alone: Tab/Shift+Tab move focus in a sane order, composite widgets roam with arrow keys over a roving tabindex, Escape dismisses overlays and returns focus. The full focus discipline beyond the focus ring, codified in the ARIA APG.
AccessibilityUsed withThe first focusable element on the page — usually a visually hidden link. Keyboard users meet it on the first Tab, activate it, and land straight in the main content without walking every nav link. The mandatory escape hatch on nav-heavy sites; WCAG calls it "bypass blocks".
AccessibilityUsed withThe luminance ratio between foreground and background — the measure of whether text can be read. WCAG 2.1 sets hard floors: 4.5:1 for AA body, 7:1 for AAA, dropping to 3:1 and 4.5:1 for large text. APCA refines this by weight and size against perception. Compute the ratio before picking colours; never sign off by eye.
FoundationUsed withNot to be confused with
hover-glow is decorative pointer feedback; a focus ring is required keyboard affordance.