outline-color

outline-color sets the color of an outline. It does not create an outline style or turn a static declaration into a focus rule.

Follow the foreground with currentColor

Both boxes have an explicit solid outline. CurrentColor makes each outline follow that box’s text color.

<p class="sample blue">Blue foreground and outline</p>
<p class="sample green">Green foreground and outline</p>

.sample {
  outline-style: solid;
  outline-width: 3px;
  outline-color: currentColor;
  padding: 0.75rem;
  margin: 1rem;
}
.blue {
  color: #1d4ed8;
}
.green {
  color: #115e59;
}

Choose a focus color on a pale surface

Tab to the button to inspect the dark outline. Its color must remain distinguishable from both the button and the surrounding area.

<div class="stage"><button type="button">Inspect keyboard focus</button></div>

.stage {
  padding: 1rem;
  background: #eff6ff;
}
button {
  padding: 0.75rem 1rem;
  font: inherit;
}
button:focus-visible {
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 3px;
  outline-color: #172554;
}

Values and prerequisites

Color values include named colors, hex, rgb(), hsl(), and currentColor. This property is not inherited. Current implementations commonly use currentColor as the initial behavior; the newer specification value auto has its own implementation status. Do not assume auto is interchangeable with the well-supported currentColor value.

A nonzero outline-width and visible outline-style are necessary. User-agent focus rules may already supply them, but a general element with no outline style will not acquire one from color alone. A later outline shorthand can reset the color.

Common mistakes

A pale outline on a pale background can be difficult to see even if the text is readable. Test focus against adjacent surfaces and in forced-color modes; avoid disabling browser color adjustment without a specific reason. Legacy invert is not a reliable modern color choice.

Learn outline, outline-width, and color.

Sources and browser support

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