Visible focus rings show which control is active—essential for keyboard navigation.
What they are
Styling around focused links, buttons, and fields. They appear when moving focus with Tab (or when :focus is enabled for pointer as well).
Defaults on a fresh install
Main toggle on. Default ring applies only to button, .btn (not all links). Alternative profile, form-field profile, and “apply on :focus” are off. Image-link fix is on.
Why use them
- Keyboard users: Cannot navigate without a clear focus indicator
- Sighted assistive-tech users: Confirms where focus landed
- Everyone: Easier orientation in dense UIs
- WCAG: Supports 2.4.7 (Focus Visible), 1.4.11 (non-text contrast on the indicator), 2.4.11 (focus not obscured—layout-dependent)
WCAG notes
- 1.4.11 Non-text contrast: indicator vs adjacent colors
- 2.4.7 Focus visible: keyboard focus must be visible
- 2.4.11 Focus not obscured: reduce overlap with sticky UI where possible
Three outline profiles
- Default: most interactive elements
- Alternative: regions with different backgrounds (e.g. dark footer)
- Form fields: inputs, textareas, selects
Guided settings interface
The profile selector spans the full content width, so Standard, Alternative, and Form fields remain easy to compare without placing three settings panels beside one another. A live preview remains visible: sticky beside the settings on desktop and before the controls in a logical reading and focus order on smaller screens.
The general help in the page heading explains how to choose among the three profiles, the difference between :focus-visible and :focus, resilient contrast-aware styling, and a complete keyboard test workflow that includes zoom, narrow viewports, and sticky page elements.
Switching between the Standard and Alternative profiles preserves the selected preview element and the light or dark preview background. The Form fields profile intentionally switches to the input example and hides the irrelevant button and link examples. Leaving that profile restores the previously selected element type.
Method-specific controls appear only when they apply. CSS selectors and special cases for image links or clickable cards remain available in expandable sections, keeping the everyday controls concise without removing advanced options.
At the start of the expanded Special cases section, a contextual help button opens the complete guidance. It explains the image-link correction, cards with invisible overlay links, how to identify and scope the three required selectors, keyboard-versus-mouse focus behavior, and practical test steps. On smaller screens it opens as a swipeable bottom sheet; on larger screens it uses the shared help dialog.
For the Alternative profile, the box-shadow method can use a two-color focus indicator with a configurable inner buffer. This keeps the indicator visible when a component crosses light and dark backgrounds.
When to use “alternative”
Use when the default ring disappears on dark or saturated sections.
Typical cases:
- Dark footer: switch to a light ring (e.g. white vs black)
- Colored bands: pick a ring that survives the local palette
- Design consistency: tune per section without breaking global chrome
How it works:
- Provide selectors (e.g. .footer a, .footer button)
- Matched elements get the alternative ring and are excluded from the default rules
When to use “form” outlines
- Fields often show persistent focus styling
- Often needs a different weight than links/buttons
- Stronger contrast helps long forms
How it works:
- Default selectors input, select, textarea
- Exclude controls that should keep the default ring (e.g. input[type=”submit”])
Settings
Default outline:
- Technique: outline, border, or box-shadow
- Style: solid, dashed, dotted
- Width: 1–10px
- Color: RGBA
- Radius: 0–20px
- Offset: gap between control and ring (outline mode)
- Inset shadow: draw inside the box (shadow mode)
- Apply on :focus: include mouse focus (default: keyboard / :focus-visible only)
- Disable transitions: avoid animated focus flashes
- Image link fix: reduce layout shift on image-wrapped links
- Extra / excluded selectors
Alternative outline: same knobs + selector list for alternate styling.
Form outline: same knobs + field selectors + exclusions.
Examples
Example 1: Baseline
Black dashed 2px outline, 2px offset, image-link fix on.
Example 2: Dark footer
Default: black 2px dashed. Alternative for .footer a, .footer button: white 3px solid.
Example 3: Forms
Default for links/buttons; form profile for input, select, textarea with blue 3px solid; exclude submit buttons from the form profile.
Example 4: Layered
Default black 2px; alternative for .footer a, .footer button, .dark-section a; form profile for fields; submit + nav buttons stay on default.
Tips
- Meet non-text contrast (1.4.11)
- Test on light and dark surfaces
- Alternative ring should differ materially from default
- Often use 3px on fields vs 2px on links
- Shadow mode is flexible; outline is simplest; border can shift layout
- Tab-test in Chrome, Firefox, Safari
- Keep image-link fix on unless it conflicts
- Scope alternative selectors (e.g. .footer a, not bare a)
Common issues
Ring invisible
Check contrast vs background; add alternative profile; enable image-link fix.
Theme overrides styles
Try border-radius !important option or box-shadow technique.
Layout jump on focus
Enable image-link fix; prefer outline over border when possible.
Technical notes
- Pure CSS—no JS required
- Defaults use :focus-visible unless “apply on :focus” is on
- Alternative and form profiles override default for matched elements
- Each element uses one profile only
Available for: All plans Free
Selector tags and automatic exclusions
Confirm each CSS selector with Enter or comma. Saved entries appear as removable tags; you can also paste a comma-separated list. Pending text is included when you leave the field or save.
In the Standard profile, the excluded-selector field also displays automatic tags grouped by their Alternative or Form fields source. Active profiles update these exclusions immediately and show feedback in the edited profile. Change automatic tags in their source profile; removing a source selector or disabling that profile removes its automatic exclusion. Manual exclusions remain unchanged. Form exceptions retain standard focus unless explicitly excluded there as well. Save settings to apply the changes to your website.