The text-decoration CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.

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

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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
blink
Deprecated
Chrome Full support 57
Notes
Full support 57
Notes
Notes The blink value does not have any effect.
Edge Full support 12
Notes
Full support 12
Notes
Notes The blink value does not have any effect.
Firefox Full support 23
Notes
Full support 23
Notes
Notes The blink value does not have any effect.
Full support 1
IE Full support Yes
Notes
Full support Yes
Notes
Notes The blink value does not have any effect.
Opera Full support 15
Notes
Full support 15
Notes
Notes The blink value does not have any effect.
Full support 4
Safari Full support Yes
Notes
Full support Yes
Notes
Notes The blink value does not have any effect.
WebView Android Full support 57
Notes
Full support 57
Notes
Notes The blink value does not have any effect.
Chrome Android Full support 57
Notes
Full support 57
Notes
Notes The blink value does not have any effect.
Edge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes The blink value does not have any effect.
Firefox Android Full support 23
Notes
Full support 23
Notes
Notes The blink value does not have any effect.
Full support 4
Opera Android Full support 4
Notes
Full support 4
Notes
Notes The blink value does not have any effect.
Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes The blink value does not have any effect.
Samsung Internet Android Full support 7.0
ShorthandChrome ? Edge No support NoFirefox Full support 36
Full support 36
Partial support 6
IE No support NoOpera No support NoSafari Full support Yes
Notes
Full support Yes
Notes
Notes Safari doesn't support text-decoration-style.
WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 36
Full support 36
Partial support 6
Opera Android ? Safari iOS Full support 8
Notes
Full support 8
Notes
Notes Safari doesn't support text-decoration-style.
Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

See also