CSS text-decoration-style Property

CSS text-decoration-style property sets the decoration style for text in HTML Element(s).

The syntax to specify a value for text-decoration-style property is

text-decoration-style: value;

The following table gives the possible values that could be given to text-decoration-style property.

ValueDescriptionExamples
solidA solid line. Default value.text-decoration-style: solid;
doubleA double line.text-decoration-style: double;
dottedA dotted line.text-decoration-style: dotted;
dashedA dashed line.text-decoration-style: dashed;
wavyA wavy line.text-decoration-style: wavy;
initialSets text-decoration-style to default value.text-decoration-style: initial;
inheritInherits text-decoration-style value from its parent element.text-decoration-style: inherit;

For text-decoration-style to take effect, make sure that text-decoration-line is set with a value that displays a line.

Examples

In the following examples, we decorate the text using text-decoration-style property.

ADVERTISEMENT

Solid Line

In the following example, we decorate the text with a solid line style, using text-decoration-style property.

Example

Double Line

In the following example, we decorate the text with a double line style, using text-decoration-style property.

Example

Dotted Line

In the following example, we decorate the text with a dotted line style, using text-decoration-style property.

Example

Dashed Line

In the following example, we decorate the text with a dashed line style, using text-decoration-style property.

Example

Wavy Line

In the following example, we decorate the text with a wavy line style, using text-decoration-style property.

Example

Conclusion

In this CSS Tutorial, we learned about text-decoration-style property, and how to use this property for HTML Elements, with examples.