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.
Nice browser support… …NOT!
Can’t wait until they support all of it. Pretty neat new features!!!
Yeowch. Is there any reason this isn’t supported as well as it should be?