Widely available Supported across all major browsers. Safe to use in production.

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.

Other

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-decoration
1
12
1
1
18
1
text-decoration-color

The text-decoration-color CSS property sets the color of decorations added to text by .
57
79
36
12.1
57
12.2
text-decoration-line

The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.
57
79
36
12.1
57
12.2
line-through
57
79
6
8
57
8
none
57
79
6
8
57
8
overline
57
79
6
8
57
8
underline
57
79
6
8
57
8
text-decoration-style

The text-decoration-style CSS property sets the style of the lines specified by . The style applies to all lines that are set with text-decoration-line.
57
79
36
12.1
57
12.2
wavy
57
79
6
8
57
8
text-decoration-thickness

The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
89
89
70
12.1
89
12.2
auto
87
87
70
12.1
87
12.2
from-font
87
87
70
12.1
87
12.2
percentage

percentage values
87
87
74
17.4
87
17.4
includes color-and-style

`text-decoration-color` and `text-decoration-style` included in shorthand
57
79
6
26.2
57
26.2
includes thickness

`text-decoration-thickness` included in shorthand
87
87
70
26.2
87
26.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (39)
Compatibility
  • Available with a vendor prefix: -moz- (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (39)
Compatibility
  • Available with a vendor prefix: -moz- (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (39)
Compatibility
  • Available with a vendor prefix: -moz- (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (89)
Implementation note
  • The `text-decoration-thickness` property has no effect unless `text-underline-offset`, `text-decoration-color`, or `text-decoration-style` are set to a non-initial value. See bug 40734940.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (89)
Implementation note
  • The `text-decoration-thickness` property has no effect unless `text-underline-offset`, `text-decoration-color`, or `text-decoration-style` are set to a non-initial value. See bug 40734940.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (89)
Implementation note
  • The `text-decoration-thickness` property has no effect unless `text-underline-offset`, `text-decoration-color`, or `text-decoration-style` are set to a non-initial value. See bug 40734940.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (8)

Syntax

CSS 
.fancy-underline {
  text-decoration-line: underline;
  text-decoration-color: #e63946;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Shorthand */
.shorthand {
  text-decoration: underline wavy #e63946 2px;
}

Live demo

Wavy underline

text-decoration (color, style, thickness) wavy lineanda-rain demo.

PreviewFullscreen

doubleline /

text-decoration (color, style, thickness) doubleline / demo.

PreviewFullscreen

thickdotted line

text-decoration (color, style, thickness) thickdotted line demo.

PreviewFullscreen

Use cases

  • Using text-decoration

    The text-decoration shorthand CSS property sets the appearance of decorative lines on text.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links