CSS Outline

CSS Outline: Highlighting Focus Without Shifting Layout

A CSS outline is a line drawn outside an element's border edge to make elements stand out—most importantly when keyboard users press Tab to focus links, buttons, and form inputs. Because outlines sit outside the CSS box model, adding or thickening an outline never pushes neighboring elements around.

Outline Properties and Offset

Outlines share similar shorthand syntax to borders (outline: 2px solid #2563eb;), with one unique superpower: outline-offset. Setting outline-offset: 3px; adds crisp whitespace between the button's border and its focus ring, making focus states unmistakable on dark and light surfaces alike.

Notice that unlike borders, outlines apply to all four sides uniformly—you cannot style outline-top independently.

.btn-submit {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
}

/* Show crisp focus ring for keyboard navigation, hide distracting mouse click ring */
.btn-submit:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 3px;
}

.btn-submit:focus:not(:focus-visible) {
    outline: none;
}

Why You Should Never Remove All Focus Outlines

Keyboard-only users and screen magnifier users rely on the focus indicator to track where they are on the page. Writing *:focus { outline: none; } without providing a clear alternative fails WCAG accessibility guidelines. Using :focus-visible solves both design and accessibility cleanly: mouse clicks stay uncluttered while keyboard Tab presses show a bold focus ring.

Common Mistakes to Avoid

• Writing outline: none without a :focus-visible replacement: Never leave interactive buttons or links invisible when focused via keyboard.
• Using outline on elements clipped by overflow: hidden parents: Overflow clipping can slice off outline-offset rings; add small inner padding on the container or use inset box-shadow if needed.
• Confusing outline with border for structural dividers: Use border for permanent card frames and outline for focus or temporary debug highlights.

Frequently Asked Questions

Does CSS outline follow border-radius automatically?

Yes! Modern browsers curve outline smoothly around an element's border-radius corners automatically.

What is the difference between :focus and :focus-visible?

:focus triggers on both mouse clicks and keyboard tabbing, whereas :focus-visible triggers primarily when the browser detects keyboard navigation.