Skip to main content
Home / CSS Almanac / Properties / T / text-decoration-style

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

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
31 * None 6 † None None None None

* only with experimental web platform features flag enabled

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

icon-link icon-logo-star icon-search icon-star