text-decoration-style

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.

See the Pen text-decoration-style by CSS-Tricks (@css-tricks) on CodePen.

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.

Related

• text-decoration
• text-decoration-line
• text-decoration-color
• text-decoration-skip

More Information

• text-decoration-style in the W3C CSS Text Decoration Module Level 3 CR
• text-decoration-style at MDN

Browser Support

* only with experimental web platform features flag enabled

† Firefox 6+ with -moz prefix, 36+ unprefixed.