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.

Comments

  1. User Avatar
    Esteban
    Permalink to comment#

    Nice browser support… …NOT!

  2. User Avatar
    Tracy
    Permalink to comment#

    Can’t wait until they support all of it. Pretty neat new features!!!

  3. User Avatar
    DaVince
    Permalink to comment#

    Yeowch. Is there any reason this isn’t supported as well as it should be?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag