Outline
A non-layout-affecting line drawn outside an element's border, primarily used for focus indicators.
Plain English
Outline is like border's cousin — it draws a line around an element but does not affect the layout (it does not push other elements). This makes it perfect for focus rings: when a keyboard user tabs to a button, the outline appears without shifting anything else on the page. The most common mistake in web design is setting outline: none on focused elements to remove the "ugly" default — this destroys keyboard accessibility entirely.
Technical
The outline shorthand mirrors border syntax (width style colour). Critical property: outline-offset adds space between the element's border and the outline ring. Use :focus-visible (not :focus) for keyboard-only focus rings — :focus triggers on mouse clicks too, which is why designers remove it. WCAG 2.4.7 (AA) requires a visible focus indicator; WCAG 2.4.11 (AA in 2.2) specifies minimum 2px outline, 3:1 contrast.
Live Demo
No outline
inaccessible
Outline too thick
distracting
WCAG outline
compliant
Accent ring
polished
Focus outlines are required for keyboard accessibility. Never remove outline without a visible alternative.
Usage
✓ Good usage
Set :focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 4px; } globally for a clean, consistent keyboard navigation ring.
✗ Bad usage
Setting * { outline: none; } or a:focus { outline: none; } — this makes keyboard navigation completely invisible, a critical accessibility failure.
Recommended values
- Focus ring: 2px solid accent-500 with outline-offset: 2px
- Keyboard-only: use :focus-visible selector, not :focus
- Offset: 2–4px to give the ring breathing room
- Rounded: outline does not follow border-radius in older browsers — use box-shadow trick for rounded focus rings
- Contrast: 3:1 minimum between ring colour and adjacent background
Common mistakes
- Removing outline with outline: none without replacing it with a custom focus indicator.
- Using :focus instead of :focus-visible — the ring appears on mouse clicks, designers remove it, keyboard users lose all indication.
- Focus ring colour that has insufficient contrast against the page background.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply a global :focus-visible style: outline: 2px solid #2563EB with outline-offset: 2px. Never remove outlines without replacing them. For elements with border-radius, simulate a rounded focus ring with box-shadow: 0 0 0 2px #2563EB, 0 0 0 4px rgba(37,99,235,0.15).