How to Use Outline-Offset in CSS: Simple Guide

The CSS property outline-offset moves the outline away from or closer to the element's edge by a specified length. Use it with a length value like outline-offset: 5px; to create space between the outline and the element's border or edge.

Syntax

The outline-offset property accepts a length value that sets the space between the outline and the element's border edge. Positive values move the outline outward, creating space outside the element, while negative values move it inward, overlapping the element.

• outline-offset: 5px; — moves the outline 5 pixels outside the element.
• outline-offset: -3px; — moves the outline 3 pixels inside the element.
• Units can be px, em, rem, etc.

css

outline-offset: 5px;

Example

This example shows a button with a blue outline and an outline-offset of 8 pixels, creating visible space between the button's border and the outline.

css

button {
  padding: 10px 20px;
  border: 2px solid #333;
  outline: 3px solid blue;
  outline-offset: 8px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  outline-color: red;
}

Output

A button with a dark border and a blue outline spaced 8 pixels outside the border. On hover, the outline color changes to red.

Common Pitfalls

Many forget that outline-offset only works if an outline is set. Without an outline, changing outline-offset has no visible effect.

Also, using negative values can cause the outline to overlap the element, which might hide part of the outline or make it look odd.

css

/* Wrong: outline-offset has no effect without outline */
div {
  outline-offset: 10px;
}

/* Correct: outline must be set */
div {
  outline: 2px solid green;
  outline-offset: 10px;
}

Quick Reference

• Property: outline-offset
• Type: length (e.g., px, em, rem)
• Default: 0 (outline touches element edge)
• Effect: Moves outline away from or closer to element edge
• Works only if: outline is set

Key Takeaways

Use outline-offset to add space between an element's outline and its border or edge.

Positive values move the outline outward; negative values move it inward.

outline-offset only works if the element has an outline set.

Common units are pixels (px) but you can use others like em or rem.

Avoid negative values unless you want the outline to overlap the element.