W3cubDocs

/CSS

text-decoration

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 value as each of the properties of the shorthand:
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Media visual
Computed value as each of the properties of the shorthand:
Animation type as each of the properties of the shorthand:
Canonical order order of appearance in the formal grammar of the values

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1 3 3.5 1
blink 57
57
The blink value does not have any effect.
12
12
The blink value does not have any effect.
23
23
The blink value does not have any effect.
1
Yes
Yes
The blink value does not have any effect.
15
15
The blink value does not have any effect.
4
Yes
Yes
The blink value does not have any effect.
Shorthand ? No 36
36
6
No No Yes
Yes
Safari doesn't support text-decoration-style.
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes 4 Yes Yes Yes
blink 57
57
The blink value does not have any effect.
57
57
The blink value does not have any effect.
Yes
Yes
The blink value does not have any effect.
23
23
The blink value does not have any effect.
4
4
4
The blink value does not have any effect.
Yes
Yes
The blink value does not have any effect.
7.0
Shorthand ? ? No 36
36
6
? 8
8
Safari doesn't support text-decoration-style.
?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration