text-decoration-style

Avatar of Marie Mosley
Marie Mosley on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.

More Information

Browser support

ChromeSafariFirefoxOperaIEAndroidiOS
31 *None6 †NoneNoneNoneNone

* only with experimental web platform features flag enabled

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