There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/text-decoration.html")}}

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

{{cssxref("text-decoration-line")}}
Sets the kind of decoration used, such as underline or line-through.
{{cssxref("text-decoration-color")}}
Sets the color of the decoration.
{{cssxref("text-decoration-style")}}
Sets the style of the line used for the decoration, such as solid, wavy, or dashed.

Formal syntax

{{csssyntax}}

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>

{{EmbedLiveSample('Examples','auto','280')}}

Specifications

Specification Status Comment
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}} {{Spec2('CSS3 Text Decoration')}} Transformed into a shorthand property. Added support for the value of {{cssxref('text-decoration-style')}}.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}} {{Spec2('CSS2.1')}} No significant changes.
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}} {{Spec2('CSS1')}} Initial definition.

{{cssinfo}}

Browser compatibility

{{Compat("css.properties.text-decoration")}}

See also

  • The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.
  • The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.