MDN’s new design is in Beta! A sneak peek:

The text-decoration CSS property is used to set the text formatting to underline, overline or line-through. Underline and overline decorations are positioned under the text, line-through over it.

/* Keyword values */
text-decoration: none;                 /* No text decoration */
text-decoration: underline red;        /* Red underlining */
text-decoration: underline wavy red;   /* Red wavy underlining */

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors. For example, in the markup <p>This text has <em>some emphasized words</em> in it.</p>, the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. However, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words".

Note: CSS Text Decoration Level 3 transformed this property as a shorthand for the three new text-decoration-color, text-decoration-line, and text-decoration-style CSS properties. Like for any other shorthand property, it means that it resets their value to their default if not explicitly set in the shorthand.

Initial valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter and ::first-line.
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values



The text-decoration property is shorthand and can use the values of each of the three longhand properties: text-decoration-line, text-decoration-color, and text-decoration-style

Formal syntax

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>


.under {
  text-decoration: underline red;

.over {
  text-decoration: wavy overline lime;

.line {
  text-decoration: line-through;

.plain {
  text-decoration: none;

.underover {
  text-decoration: dashed underline overline;

.blink {
  text-decoration: blink;
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful with removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>


Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-decoration' in that specification.
Candidate Recommendation Transformed into a shorthand property. Added support for the value of text-decoration-style.
CSS Level 2 (Revision 1)
The definition of 'text-decoration' in that specification.
Recommendation No significant changes.
CSS Level 1
The definition of 'text-decoration' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 1.0 (Yes) 3.0 3.5 1.0
blink value 57 1.0 (1.7 or earlier)
23.0 (23.0)
(Yes) (Yes)[1] (Yes)[1] 4.0
Shorthand property ? 6.0 (6.0)[3]
36.0 (36.0)
(Yes) No support No support No support 7.1[2]
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.0) (Yes) (Yes) (Yes) (Yes) (Yes)
blink value 57 57 1.0 (1.7 or earlier)
23.0 (23.0)[1]
(Yes)[1] (Yes)[1] (Yes)[1] 4.0[1] (Yes)[1]
Shorthand property ? ? 6.0 (6.0)[3]
36.0 (36.0)
? No support ? ? 8[1]

[1] The blink value does not have any effect.

[2] Safari doesn't support text-decoration-style.

[3] This version of Gecko has a partial implementation.

See also