Get a free trial // Grow your CSS skills // Land your dream job


Last updated on:

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

h3 {
  text-decoration: underline;


  • none: no line is drawn, and any existing decoration is removed.
  • underline: draws a 1px line across the text at its baseline.
  • line-through: draws a 1px line across the text at its "middle" point.
  • overline: draws a 1px line across the text, directly above its "top" point.
  • inherit: inherits the decoration of the parent.

The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to "blink" by rapidly toggling it between 0% and 100% opacity.


See the Pen CSS-Tricks: Text Decoration by CSS-Tricks (@css-tricks) on CodePen.

Usage Notes

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines:

p {
  text-decoration: overline underline line-through;

By default, the line or lines inherit the color of the text as set by its color property. You can change this in browsers that support the text-decoration-color property or the three-value shorthand property.

text-decoration as a Shorthand Property

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a 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.


More Information

Browser Support

All browsers support the CSS2.1 "longhand" property text-decoration. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.

Chrome Safari Firefox Opera IE Android iOS
Any * † Any * Any Any ‡ Any ‡ Any ‡ Any *

* text-decoration fully supported, sub-properties supported with -webkit prefix.
† sub-properties additionally require experimental web platform features flag enabled.
‡ CSS2.1 text-decoration only; sub-properties not supported.


  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

  9. Indian home decoration
    Permalink to comment#

    Thank you for providing such a useful information.

  10. dadanini
    Permalink to comment#

    text-decoration specifications are still under development ( everything with those subproperties ist experimental.
    if you need another color for your underline use an additional span element.
    for e.g.

    Try this!

    (<span style=”color:red; text-decoration: underline”><span style=”color: blue; text-decoration: none”>Try this!</span></span>)

    good luck, regards

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>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed