What is the difference between CSS outline and border?
❓ Interview Prompt: Compare outline and border properties and explain why outline is critical for keyboard accessibility.
Both outline and border draw lines around elements, but they behave differently:
| Feature | border | outline |
|---|---|---|
| Part of Box Model | Yes (affects layout) | No (drawn outside, no layout impact) |
| Per-side control | Yes (border-top, etc.) | No (all sides only) |
| Border radius | Follows border-radius | Uses outline-offset |
| Default purpose | Visual design | Keyboard focus indicator |
Accessibility Critical:
Browsers add a default outline when elements receive keyboard focus. Never remove outlines (outline: none) without providing an alternative focus indicator. Use :focus-visible to show focus only for keyboard users.
Code Implementation Example
/* ❌ NEVER do this without an alternative */
/* button:focus { outline: none; } */
/* ✅ Custom focus indicator for keyboard users only */
button:focus-visible {
outline: 3px solid #886f68;
outline-offset: 2px;
}
/* Decorative border (part of layout) */
.card {
border: 1px solid #e5d8dd;
border-radius: 12px;
}Never remove focus outlines without providing an alternative. Use :focus-visible for keyboard-only focus indicators.