Presets

Target Element

Outline Properties

Outside element

Focus State Options

Advanced Options

0.15s

Configuration

Live Preview

Offset: 2pxWidth: 2pxStyle: solid
Link Element

Click or tab to these elements to see focus state:

Offset Comparison

-4px
0px
4px
8px
12px

Style Comparison

Generated CSS

Minimal CSS
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}
Full CSS with Options
/* Base element styles */
button {
  outline: none;
  transition: outline 0.15s ease-out,
             outline-offset 0.15s ease-out;
}

/* Focus state */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Focus-visible (keyboard navigation only) */
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Hide outline on mouse click, show on keyboard */
button:focus:not(:focus-visible) {
  outline: none;
}

Code Examples

Basic Focus Outline

/* Basic accessible focus outline */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Remove default outline and use custom */
button {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Animated Focus Ring

.btn {
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: outline-color 0.2s ease,
              outline-offset 0.2s ease;
}

.btn:focus-visible {
  outline-color: #0066cc;
  outline-offset: 4px;
}

Focus Within Container

.card {
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: outline-color 0.15s ease,
              outline-offset 0.15s ease;
}

/* Highlight card when any child is focused */
.card:focus-within {
  outline-color: #0066cc;
  outline-offset: 4px;
}

/* Also highlight the focused element */
.card :focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

High Contrast Mode Support

button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* High contrast mode */
@media (forced-colors: active) {
  button:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

Skip Link Pattern

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
  z-index: 100;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ffff00;
  outline-offset: 2px;
}

/* Usage: <a href="#main" class="skip-link">Skip to content</a> */

Custom Properties (CSS Variables)

:root {
  --focus-outline-width: 2px;
  --focus-outline-style: solid;
  --focus-outline-color: #0066cc;
  --focus-outline-offset: 2px;
  --focus-transition: 0.15s ease-out;
}

*:focus-visible {
  outline: var(--focus-outline-width)
           var(--focus-outline-style)
           var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* Override for specific elements */
.danger-btn:focus-visible {
  --focus-outline-color: #dc3545;
}

.success-btn:focus-visible {
  --focus-outline-color: #28a745;
}

Reference

CSS Properties

PropertyValuesDescription
outlinewidth style colorShorthand for outline properties
outline-widthlength | thin | medium | thickWidth of the outline
outline-stylesolid | dashed | dotted | double | etc.Style of the outline
outline-colorcolor | invertColor of the outline
outline-offsetlengthSpace between outline and border

Focus Pseudo-classes

SelectorSupportDescription
:focusAll browsersMatches when element has focus (any method)
:focus-visibleModern browsersMatches when focus should be visible (keyboard)
:focus-withinModern browsersMatches when element or descendant has focus

Browser Support

Browseroutline-offset:focus-visible
Chrome1+86+
Firefox1.5+85+
Safari1.2+15.4+
Edge15+86+

Accessibility Guidelines

  • WCAG 2.4.7 (Focus Visible): Any keyboard operable UI must have a visible focus indicator
  • WCAG 2.4.11 (Focus Not Obscured): Focus indicator should not be hidden by other content
  • Contrast: Focus indicator should have at least 3:1 contrast against adjacent colors
  • Size: Focus indicator should be clearly visible - at least 2px is recommended
  • No outline: none: Never remove focus indicators without providing an alternative
  • :focus-visible: Prefer :focus-visible over :focus for better UX (keyboard only)

Best Practices

  • Always provide visible focus indicators for interactive elements
  • Use :focus-visible to show focus only on keyboard navigation
  • Ensure sufficient contrast between focus indicator and background
  • Use consistent focus styles across your application
  • Consider using CSS custom properties for easy theming
  • Test focus visibility in high contrast mode
  • Provide smooth transitions but respect prefers-reduced-motion
  • Use positive offset values to avoid overlap with content
  • Consider negative offset for inset focus effects on larger elements

Rate this tool