outline-style

outline-style controls the pattern of an outline. None suppresses it; solid, dashed, dotted, and double draw different patterns. The browser’s auto style lets the user agent choose its appearance.

Compare solid and dashed

Width and color are explicit so only the line pattern changes.

<p class="sample solid">Solid outline</p>
<p class="sample dashed">Dashed outline</p>

.sample {
  outline-width: 3px;
  outline-color: #2563eb;
  padding: 0.75rem;
  margin: 1rem;
}
.solid {
  outline-style: solid;
}
.dashed {
  outline-style: dashed;
}

Use a solid keyboard-focus indicator

Tab to each button. The selector supplies a visible pattern only for focus-visible, rather than claiming that any outline declaration responds to focus.

<button type="button">One</button><button type="button">Two</button>

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

Values and defaults

The initial value is none, and the property is not inherited. Other line styles include groove, ridge, inset, and outset; their shading is browser-dependent. Double uses two lines with a gap within the total outline width. Auto permits a browser-specific outline, so do not expect a precise dotted or solid pattern from it. Hidden is a border-style value, not an outline-style value.

Common mistakes

A static outline is not automatically a focus indicator. Outline-style:none can hide the native keyboard indicator; do not apply it globally. A width of zero is still invisible even with solid. A later outline shorthand resets the style.

Learn outline-width, outline-color, and outline.

Sources and browser support

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