CSS Outline

Outline looks a lot like border at first glance, an outline is a line drawn around an element, but it behaves quite differently under the hood. The biggest difference: outline never takes up layout space, and it's drawn outside the border rather than being part of the box model at all. Outlines show up constantly for one specific job: accessibility. When you tab through a page with your keyboard, the browser draws a focus outline around whichever element is currently selected, so you always know where you are. Understanding outline properly means you can safely customize that focus indicator on a site like cookiescursor.com, without accidentally breaking keyboard navigation for visitors who rely on it.

In this page:

outline-style
outline-width and outline-color
outline-offset
Shorthand outline Property
Outline vs Border: Key Differences

outline-style

outline-style sets the line pattern of an outline, such as solid, dashed, or dotted, following the exact same style keywords as border-style. Unlike border, outline never affects an element's box size or layout, since it's drawn outside the box entirely.

Note: solid is the most common outline style, especially for custom focus indicators.

Warning: Like border, an outline needs a style set to actually render, even if width and color are already defined.

Example: outline-style

css

<style>
.box {
  outline-style: dashed;
}
</style>
<div class="box">Outline never affects layout size</div>

outline-width and outline-color

outline-width sets how thick the outline is, and outline-color sets its color, working just like border-width and border-color but for the separate outline layer. These are most commonly customized to make a focus outline match a site's branding instead of the browser default.

Note: Keep outline-width visible enough to notice, at least 2px, since a focus ring is only useful if it's easy to see.

Warning: A low-contrast outline-color against the page background can make a focus indicator nearly invisible to some visitors.

Example: outline-width and outline-color

css

<style>
button:focus {
  outline-style: solid;
  outline-width: 3px;
  outline-color: orange;
}
</style>
<button>Tab to me</button>

outline-offset

outline-offset adds space between the element's edge and its outline, pushing the outline further out without changing the element's own size or layout. This is useful when you want visible separation between an element and its focus ring without changing anything else about the box.

Note: A small positive outline-offset, like 2px to 4px, often makes a focus ring look cleaner by separating it slightly from the element's own border.

Warning: outline-offset does not affect layout at all, other elements on the page won't shift to make room for it, unlike a change to margin.

Example: outline-offset

css

<style>
button:focus {
  outline: 2px solid blue;
  outline-offset: 4px;
}
</style>
<button>Focus ring pushed outward</button>

Shorthand outline Property

Just like border, outline has a shorthand property that combines width, style, and color into a single declaration. Removing outlines entirely with 'outline: none' is a common accessibility mistake, since it strips keyboard users of visible focus feedback.

Note: The shorthand keeps focus-state CSS short and readable, especially when defining it on a :focus selector.

Warning: As with the border shorthand, leaving out the style value means no outline shows at all, regardless of width or color.

Example: Shorthand outline Property

css

<style>
a:focus {
  outline: 2px solid orange;
}
</style>
<a href="#">Width, style, color in one line</a>

Outline vs Border: Key Differences

Border is part of the box model and adds to an element's layout size (unless box-sizing: border-box is used); outline sits entirely outside the box model and never affects layout, even when it visually overlaps neighboring content.

Note: Use border for permanent, structural styling, and outline for temporary, interactive states like focus and validation feedback.

Warning: Never set outline: none without providing another clearly visible focus style in its place, doing so makes keyboard navigation very difficult to follow.

Example: Outline vs Border: Key Differences

css

<style>
.bordered {
  border: 4px solid black;
}
.outlined {
  outline: 4px solid black;
}
</style>
<div class="bordered">Border adds to layout size</div>
<div class="outlined">Outline never affects layout, even overlapping</div>

Common Mistakes

Setting outline: none to 'clean up' a design without providing any other visible focus indicator, breaking keyboard accessibility.
Expecting outline to affect an element's layout size the way border does, it doesn't, since it's drawn outside the box entirely.
Forgetting outline-offset exists, which is often a better fix than fighting with border for spacing around a focus ring.

Chapter Summary

Outline draws a line around an element but never affects its layout size, unlike border.
outline-offset adds space between an element's edge and its outline.
Outlines are essential for accessibility, since browsers use them to show keyboard focus; never remove them without replacing them.

Browser Support

All standard CSS outline properties covered here are supported by every modern browser.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Pointer Events Next Lesson → CSS Website Layout