Skip to main content
Home / CSS Almanac / Properties / T / text-decoration

text-decoration

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

h3 {
  text-decoration: underline;
}

Values

  • none: no line is drawn, and any existing decoration is removed.
  • underline: draws a 1px line across the text at its baseline.
  • line-through: draws a 1px line across the text at its "middle" point.
  • overline: draws a 1px line across the text, directly above its "top" point.
  • inherit: inherits the decoration of the parent.

The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to "blink" by rapidly toggling it between 0% and 100% opacity.

Demo

See the Pen CSS-Tricks: Text Decoration by CSS-Tricks (@css-tricks) on CodePen.

Usage Notes

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines:

p {
  text-decoration: overline underline line-through;
}

By default, the line or lines inherit the color of the text as set by its color property. You can change this in browsers that support the text-decoration-color property or the three-value shorthand property.

text-decoration as a Shorthand Property

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:

.fancy-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
 
  /* can be shortened to */
  text-decoration: underline wavy red;
}

Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.

Related

More Information

Browser Support

All browsers support the CSS2.1 "longhand" property text-decoration. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
806271No76TP

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
13.0-13.1*46No767668

* text-decoration fully supported, sub-properties supported with -webkit prefix.
† sub-properties additionally require experimental web platform features flag enabled.
‡ CSS2.1 text-decoration only; sub-properties not supported.

icon-link icon-logo-star icon-search icon-star