CSS text-decoration-style Property

❮ Previous Reference Next ❯


.example1 {
  text-decoration-line: underline;
  text-decoration-style: solid;

.example2 {
  text-decoration-line: underline;
  text-decoration-style: double;

.example3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;

.example4 {
  text-decoration-line: underline;
  text-decoration-style: wavy;

Hello World!


The text-decoration-style property sets the style of the lines specified by text-decoration-line.

Note: The style applies to all lines that are set with text-decoration-line.

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like <del> or <s>. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

Default value:solid
JavaScript syntax:

Standard Syntax

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

Browser Support

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


Property Values

The following table describes the values of this property.

Value Description
solid This is default value. Specifies the line will display as a single line.
double Specifies the line will display as a double line.
dotted Specifies the line will display as a dotted line.
dashed Specifies the line will display as a dashed line.
wavy Specifies the line will display as a wavy line.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  text-decoration-style: solid;
❮ Previous Reference Next ❯