What is a CSS outline and why does it matter for accessibility?

The CSS outline property draws a line around an element outside its border. Browsers use it to show which element has keyboard focus. Without a visible focus indicator, keyboard and screen-reader users can't tell where they are on the page — making the site inaccessible. WCAG 2.2 Success Criterion 2.4.11 requires a visible focus indicator with sufficient size and contrast.

What is the difference between outline and border in CSS?

Unlike border, outline does not take up space in the layout — it doesn't affect element dimensions or cause reflow. outline is drawn outside the element's border box and supports the outline-offset property to add a gap between the outline and the element. This makes it ideal for focus styles that don't disturb the page layout.

Should I use :focus or :focus-visible?

:focus fires for every focus event (mouse click, touch, keyboard). :focus-visible fires only when the browser determines the focus indicator should be visible — typically for keyboard navigation. Using :focus-visible gives you clean UX: mouse users don't see a focus ring after clicking a button, but keyboard users always do. Modern browsers fully support :focus-visible.

What outline settings meet WCAG 2.2 requirements?

WCAG 2.2 SC 2.4.11 (Level AA) requires the focus indicator to: (1) enclose the component, (2) have a minimum area equal to the perimeter × 2px, and (3) have at least a 3:1 contrast ratio between focused and unfocused states. A solid outline of 2px or more with sufficient color contrast (e.g. 2px solid #2563eb on white) typically passes. The "Accessible" preset in this tool is designed to meet WCAG 2.2 AA.

Why should I never use outline: none without a replacement?

outline: none removes the browser's default focus indicator. This is a common accessibility mistake that makes the website unusable for keyboard users and fails WCAG 2.1 SC 2.4.7. If you want a custom focus style, always replace outline: none with a custom outline, box-shadow, or other visible indicator rather than simply removing it.

What does outline-offset do?

outline-offset adds transparent space between an element and its outline. A value like outline-offset: 3px pushes the outline outward by 3px, preventing it from overlapping the element's background or border. This improves clarity and gives the focus indicator a cleaner look, especially on rounded elements.

Free Accessibility Tool

Generate CSS Outline Styles for
Accessible Focus Indicators

Build WCAG-compliant focus rings in seconds. Adjust outline-width, outline-style, outline-color, and outline-offset with a live preview — then copy the CSS.

♿

WCAG Presets

Start with browser-default, WCAG AA, or high-contrast presets and customise from there.

👁️

Live Preview

See your outline on buttons, links, inputs, and cards as you tweak each property.

📋

Copy-Ready CSS

One click copies :focus and :focus-visible CSS that you can paste straight into your stylesheet.

Presets

Properties

outline-style

outline-width3px

1px10px

outline-color#3b82f6

outline-offset3px

0px16px

Live Preview

Outline is always visible here for demo purposes. In production it shows only on :focus or :focus-visible.

Generated CSS

:focus

:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

:focus-visible Recommended

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

Use :focus-visible so focus rings only appear for keyboard navigation, not mouse clicks.

Accessibility Tips

✓WCAG 2.2 SC 2.4.11 requires focus indicators with ≥ 2px width and 3:1 contrast ratio.
✓Never use outline: none without providing an alternative visible focus style.
✓Use outline-offset to add breathing room between the outline and element boundary.
✓Prefer :focus-visible over :focus to improve UX for pointer (mouse/touch) users.

Frequently Asked Questions

Everything you need to know about CSS Outline Generator.

Generate CSS Outline Styles forAccessible Focus Indicators

WCAG Presets

Live Preview

Copy-Ready CSS

Presets

Properties

Live Preview

Generated CSS

Accessibility Tips

Frequently Asked Questions

Generate CSS Outline Styles for
Accessible Focus Indicators