text-decoration

The text-decoration CSS property specifies the appearance of decorative lines used on text. It is a shorthand for setting one or more individual text-decoration values in a single declaration, which include text-decoration-line, text-decoration-color, and text-decoration-style.

/* 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 are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration. 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".

Initial valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
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

Syntax

The text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

Values

text-decoration-line
Sets the kind of decoration used, such as underline or line-through.
text-decoration-color
Sets the color of the decoration.
text-decoration-style
Sets the style of the line used for the decoration, such as solid, wavy, or dashed.

Formal syntax

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

Examples

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

Specifications

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
15.0[1]
(Yes)[1]
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