Treehouse: Grow your CSS skills. Land your dream job.


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


  1. robby mahdi
    Permalink to comment#

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

  2. My Apartment Need Furniture
    Permalink to comment#

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

  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.

    • Chris Krycho

      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.

  7. Deepak Sudera
    Permalink to comment#

    Chrome don’t support text-decoration-style.,,… but Firefox support.. Please help me for Chrome Browser…

  8. Brian Pohuski
    Permalink to comment#

    By using inline-table and table-caption, we can force the proper positioning of a pseudo-element that allows proper scaling.

    a {
      text-decoration: none;
      display: inline-table;
    a:after {
      content: "";
      width: 100%;
      border-bottom: 0.1em solid #f00;
      display: table-caption;
      vertical-align: baseline;
      position: relative;
      top: 0.9em;

    My explanation on StackOverflow

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";