Definition and Usage

The text-decoration-style property specifies the style of lines drawn by the text-decoration-line property.

Styles such as solid, dashed, dotted, double, and wavy are supported.

Basic Example

CSS Live Demo: text-decoration-style Click the demo button below!

Formal syntax

CSS 
selector {
    text-decoration-style: solid | double | dotted | dashed | wavy
}

Values

The text-decoration-style property specifies the style of text decoration lines drawn on an element. The following values determine how these lines are drawn.

Accepted values for the text-decoration-style property
solid The default solid line style.
double A double line style.
dotted A dotted line style.
dashed A dashed line style.
wavy A wavy line style.

Syntax

CSS 
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;

Formal definition

Formal definition of the text-decoration-style property
Initial value solid
Applies to all elements
Inherited no
Animatable no

Practical Examples

HTML 
<p>The text-decoration-style property is set to wavy.</p>
CSS 
p {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
}
CSS text-decoration-color Property
Rendered Output

Browser compatibility

Browser compatibility for the text-decoration-style property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-decoration-style 57 79 36 12.1

Specifications

Specification for the text-decoration-style property
Specification
text-decoration-style CSS Text Decoration Module Level 3
#text-decoration-style-property

References

See also