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.

<p class="underline">Underlined Text</p>
<p class="overline">Overline Text</p>
<p class="strikethrough">Stricken Text</p>
<p class="blink">Blinking Text (may not work in your browser!)</p>
.underline {text-decoration: underline;}
.overline {text-decoration: overline;}
.strikethrough {text-decoration: line-through;}
.blink {text-decoration: blink;}

body {
  padding-left: 2em;
}

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 colorproperty. 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.

Browser Support

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