Grow your CSS skills. Land your dream job.

text-decoration

Last updated on:

The text-decoration property is used to add visual emphasis to content that is independent from the text's font style, weight or other properties.

Check out this Pen!

Prior to CSS3, the text-decoration property supported five values:

  1. none, which removes any decoration
  2. underline, which draws a 1px line across the text at the baseline
  3. line-through, which draws a 1px line across the text at the text's "middle" point
  4. overline, which draws a 1px line across the text at the text's "top" point
  5. blink, a much-maligned property that causes the text to flash, alternating between 0 and 100% opacity

The three properties that draw lines inherit the color of the text, determined by the color property. text-decoration supports the use of multiple values (text-decoration: underline overline;).

In CSS3, text-decoration is now a shorthand property, incorporating the following new properties (written in this order):

  • text-decoration-line, which supports the five values from CSS 2.1, outlined above
  • text-decoration-style, which supports the values solid, double, dotted, dashed, and wavy
  • text-decoration-color, which supports any CSS color value

The text-decoration-color and text-decoration-style values in the shorthand are optional and default to none if not explicitly stated, so in practice writing text-decoration is fully backwards-compatible in browsers that do not support CSS3. As of June 2013, only Firefox supports the CSS3 shorthand syntax.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

Comments

  1. please tell me how to Disable right click to several text only

  2. how to change the style of the underline?
    i mean change the underline color, size, etc.
    thanks..

  3. Martijn
    Permalink to comment#

    -webkit-text-decoration-style: dotted;
    Doesn’t even work in Canary 36. The -moz- equivalent does work in Firefox.

    How to apply this property in Chrome then?

  4. Rio Brewster
    Permalink to comment#

    I’m confused. The article says this is only supported in FF, but then in the table below it says that it “works” across all major browsers. Are you giving me false hope here?

    My experience is that text-decoration-style and text-decoration-color only work in FF and only with the -moz prefix.

    I would love to be able to use this, because using border-bottom can be quirky – and I can’t believe this wasn’t addressed in CSS2 much less CSS3.

  5. Martijn

    Turns out in Chrome (26+, iirc) you need to enable an experimental features flag. Users aren’t going to do that even if you ask nicely. So Chrome, for most intents and purposes, does NOT support this feature yet.

    It’s technically in the codebase, and Chrome can technically support it, but virtually noone is going to see it working.

  6. Martijn

    Same story for Opera, IE, Safari, Android, iOS, Dolphin, UC Browser, BlackBerry, WP8. Basically all browsers except (desktop?) Firefox don’t support text-decoration-style.

    • That situation looks to be changing slowly. Safari 8 (in the Yosemite developer preview) now has partial support for it: the double and wavy options render (the latter is ugly, though), and the text-decoration-color property is supported as well.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".