text-decoration

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

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

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.
text-decoration-thickness: Sets the thickness of the line used for the decoration.

Formal definition

Initial value	as each of the properties of the shorthand: `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Computed value	as each of the properties of the shorthand: `text-decoration-line`: as specified `text-decoration-style`: as specified `text-decoration-color`: computed color `text-decoration-thickness`: as specified
Animation type	as each of the properties of the shorthand: `text-decoration-color`: a color `text-decoration-style`: discrete `text-decoration-line`: discrete `text-decoration-thickness`: by computed value type

Formal syntax

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

Examples

Demonstration of text-decoration values

.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;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.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="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>

Specifications

Specification
CSS Text Decoration Module Level 3 # text-decoration-property

Browser compatibility

Report problems with this compatibility data on GitHub

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`text-decoration`	ChromeFull support1	EdgeFull support12	FirefoxFull support1	Internet ExplorerFull support3	OperaFull support3.5	SafariFull support1	WebView AndroidFull support37	Chrome AndroidFull support18	Firefox for AndroidFull support4	Opera AndroidFull support10.1	Safari on iOSFull support1	Samsung InternetFull support1.0
`blink` Deprecated	ChromeNo supportNo	EdgeNo supportNo	FirefoxNo support1 – 23	Internet ExplorerNo supportNo	OperaNo support4 – 15	SafariNo supportNo	WebView AndroidNo supportNo	Chrome AndroidNo supportNo	Firefox for AndroidNo support4 – 23	Opera AndroidNo support10.1 – 14	Safari on iOSNo supportNo	Samsung InternetNo supportNo
Shorthand	ChromeFull support57	EdgeFull support79	FirefoxFull support36	Internet ExplorerNo supportNo	OperaFull support44	SafariFull support8 prefix	WebView AndroidFull support57	Chrome AndroidFull support57	Firefox for AndroidFull support36	Opera AndroidFull support43	Safari on iOSFull support8 prefix	Samsung InternetFull support7.0
`text-decoration-thickness` included in shorthand ExperimentalNon-standard	ChromeFull support87	EdgeFull support87	FirefoxFull support70	Internet ExplorerNo supportNo	OperaFull support73	SafariNo supportNo	WebView AndroidFull support87	Chrome AndroidFull support87	Firefox for AndroidNo supportNo	Opera AndroidFull support62	Safari on iOSNo supportNo	Samsung InternetFull support14.0

Full support: Full support
Partial support: Partial support
No support: No support
: Experimental. Expect behavior to change in the future.
: Non-standard. Check cross-browser support before using.
: Deprecated. Not for use in new websites.
: Requires a vendor prefix or different name for use.

text-decoration

Legend