text-decoration-style | CSS-Tricks

The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied.

a {
  text-decoration-style: solid;
}

Values

solid: the default. Decoration is a single solid line.
double: Decoration is a pair of solid lines.
dotted: Decoration is a dotted line.
dashed: Decoration is a dashed line.
wavy: Decoration is a wavy line.

Demo

At the time of this writing, text-decoration-style is only officially supported in Firefox. It will also work in Chrome browsers with the experimental web platform features flag enabled.

Shorthand

In browsers that support text-decoration-style and text-decoration-color you can add a decoration style to a text-decoration shorthand property:

.underlined {
  text-decoration: underline dotted red;
}

Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.