Outline vs Border

The outline property looks similar to border but behaves very differently. Understanding the differences is crucial for accessibility and layout.

Key Differences

Outlines do not take up space — they overlay content outside the border box without affecting layout.
Outlines are drawn outside the border.
Outlines cannot be styled per-side (no outline-left).
Outlines are rendered during focus for accessibility by browsers automatically.

outline-offset

Moves the outline away from the border edge by a specified distance. Negative values draw the outline inside the element.

Accessibility

Never set outline: none without providing an alternative visible focus indicator — doing so harms keyboard users.

Example

/* Default browser focus outline — do not remove */
:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
}

/* Custom focus style for buttons */
.btn:focus-visible {
    outline: 3px solid #fbbc04;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Negative offset — outline inside the element */
.inset-outline:focus {
    outline: 2px dashed #fff;
    outline-offset: -4px;
}

/* Outline for debugging layout (no layout shift) */
* { outline: 1px solid red; }

/* Accessible "skip to content" link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #1a73e8;
}

CSS

Full Editor

Pro Tip

Never write outline: none or outline: 0 without providing an equally visible focus replacement — WCAG 2.4.7 requires all keyboard-focusable components to have a visible focus indicator.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned