CSS text-decoration-style property

Definition and Usage

The text-decoration-style property sets the type of text decoration (solid, wavy, dotted, dashed, double) for the text.

Tip:Also see: text-decoration Property, which is a shorthand for these three properties:

  • text-decoration-line
  • text-decoration-style
  • text-decoration-color

See also:

CSS Tutorial:CSS Text

HTML DOM Reference Manual:textDecorationStyle Property

Example

Set different types of text-decoration styles:

div.a {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
div.b {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
div.c {
  text-decoration-line: underline;
  text-decoration-style: double;
}
div.d {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}

Try It Yourself

CSS Syntax

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

Property Value

Value Description
solid Default Value. The line is displayed as a single line.
double The line is displayed as a double line.
dotted The line is displayed as a dotted line.
dashed The line is displayed as a dashed line.
wavy The line is displayed as a wavy line.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default Value: solid
Inheritance: No
Animation Creation: Not Supported. See also:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.textDecorationStyle="wavy"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -moz- indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1 44.0