text-decoration-style

text-decoration-style chooses the pattern of existing decorative lines. It does not add a line when text-decoration-line is none.

Compare all five standard patterns

Every paragraph uses the same underline, color, and thickness. Only the pattern changes.

<p class="solid">Solid</p>
<p class="double">Double</p>
<p class="dotted">Dotted</p>
<p class="dashed">Dashed</p>
<p class="wavy">Wavy</p>

p {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #2563eb;
  font-size: 1.25rem;
}
.solid {
  text-decoration-style: solid;
}
.double {
  text-decoration-style: double;
}
.dotted {
  text-decoration-style: dotted;
}
.dashed {
  text-decoration-style: dashed;
}
.wavy {
  text-decoration-style: wavy;
}

Style a link without removing its line

A solid underline remains in the default state and becomes double on hover or focus-visible. The focus outline remains the clear keyboard indicator.

<p>Try the <a href="#details">practice details</a>.</p>
<section id="details">
  <h2>Practice details</h2>
  <p>This destination is inside the example.</p>
</section>

a {
  color: #1d4ed8;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: 0.2em;
}
a:hover,
a:focus-visible {
  text-decoration-style: double;
}
a:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}

Values and defaults

The initial value is solid and the property is not inherited. Solid, double, dotted, dashed, and wavy are the standard styles. The obsolete vendor value -moz-none is not a portable replacement for text-decoration-line:none. A later text-decoration shorthand resets this style.

Common mistakes

The old comparison depended on a style block outside the copyable example. Here every required declaration travels with the document. A wavy red line may resemble a spelling error, so do not give it an unrelated essential meaning without explanation. Border-bottom has box behavior and does not reproduce inline text-decoration wrapping or glyph avoidance.

Learn text-decoration-line, text-decoration-color, and text-decoration-skip-ink.

Sources and browser support

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