outline

By Dan Gold

outline sets outline width, style, and color together. An outline is painted around a box without taking up layout space. A declaration on button alone draws it all the time; focus behavior needs a focus selector.

Draw an always-visible outline

This paragraph has a 3px outline separated from its border by 4px. The outline does not move the following paragraph.

HTML and CSS

HTML

<p class="sample">Always outlined</p>
<p>Neighboring content keeps its layout position.</p>

CSS

.sample {
  padding: 1rem;
  border: 1px solid #94a3b8;
  outline: 3px solid #2563eb;
  outline-offset: 4px;
  margin: 1rem;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Show an outline for keyboard focus

Tab to either button. Focus-visible draws the outline when the browser determines that a visible focus indicator is needed. The native focus style is not removed.

HTML and CSS

HTML

<button type="button">First example control</button
><button type="button">Second example control</button>

CSS

button {
  font: inherit;
  padding: 0.75rem 1rem;
  margin: 0.5rem;
}
button:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Syntax and resets

Width, style, and color may appear in any order; omitted components reset to their initial values. Width defaults to medium, style to none, and current browser color behavior generally uses currentColor. The specification’s newer color auto behavior has separate support considerations. Outline is not inherited. Outline-offset is separate and is not reset by this shorthand.

Common mistakes

Setting only width or color does not supply a visible style. Removing outlines without an equally clear replacement hides keyboard focus. An outline can overlap adjacent content or be clipped by an ancestor, so leave space and test it. Outlines can follow multiline inline content rather than a single rectangle; do not use them to control box dimensions.

The shorthand has long-established support; using longhands does not inherently make it more compatible. Learn outline-offset, outline-style, and border.

Sources and browser support

MDN: outline describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.