CSS

text-decoration-style

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 »

Definition and Usage

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

Tip: Also look at the text-decoration property,
which is a short-hand property for text-decoration-line, text-decoration-style,
text-decoration-color, and text-decoration-thickness. 

Show demo ❯

Default value:
solid

Inherited:
no

Animatable:
no. Read about animatable

Version:
CSS3

JavaScript syntax:
object.style.textDecorationStyle=”wavy”
Try it

Browser Support

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

Numbers followed by -moz- specify the first version that worked with a prefix.

Property

text-decoration-style
57.0
79.0
36.0
6.0 -moz-
12.1
44.0

CSS Syntax

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

Property Values

Value
Description
Play it

solid
Default value. The line will display as a single line
Demo ❯

double
The line will display as a double line
Demo ❯

dotted
The line will display as a dotted line
Demo ❯

dashed
The line will display as a dashed line
Demo ❯

wavy
The line will display as a wavy line
Demo ❯

initial
Sets this property to its default value. Read about initial

inherit
Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Text Decoration

HTML DOM reference: textDecorationStyle property