CSS - text-decoration-style Property

Quiz

CSS text-decoration-style property is used to set the style of the text decoration. It specifies the type of line drawn as a text decoration such as solid, wavy, dotted, dashed, or double.

You need to use the CSS text-decoration or text-decoration-line property before using the CSS text-decoration-style property.

Syntax

The syntax for the CSS text-decoration-style property is as follows:

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

Property Values

Value	Description
solid	It specifies a solid line.
dotted	It specifies a dotted line.
dashed	It specifies a dashed line.
double	It specifies a double line.
wavy	It specifies a wavy line.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Examples of text-decoration-style Property

The following examples illustrate various text-decoration-style values.

Set text-decoration-style to 'dotted' & 'wavy'

In this example, we have set the CSS text-decoration-style property to be dotted and wavy. The first paragraph displays a dotted line whereas the second paragraph displays a wavy line.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-style Property</title>
    <style>
        .heading {
            color: #04af2f;
        }
        .myClass {
            text-decoration: underline;
            text-decoration-style: dotted;
            font-size: 20px;
        }
        .myClass2 {
            text-decoration: line-through;
            text-decoration-style: wavy;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2 class="heading">
        CSS text-decoration-style Property
    </h2>
    <p class="myClass">
        This paragraph has dotted text decoration style.
    </p>
    <p class="myClass2">
        This paragraph has dotted text decoration style.
    </p>
</body>
</html>

Set text-decoration-style to 'dashed' & 'double'

In this example, we have set the CSS text-decoration-style property to dashed and double. The first paragraph displays a dashed line whereas the second paragraph displays a double line.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-style Property</title>
    <style>
        .heading {
            color: #04af2f;
        }
        .myClass {
            text-decoration: underline;
            text-decoration-style: dashed;
            font-size: 20px;
        }
        .myClass2 {
            text-decoration: line-through;
            text-decoration-style: double;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2 class="heading">
        CSS text-decoration-style Property
    </h2>
    <p class="myClass">
        This paragraph has dotted text decoration style.
    </p>
    <p class="myClass2">
        This paragraph has dotted text decoration style.
    </p>
</body>
</html>

Supported Browsers

Property
text-decoration-style	57	79	6	8	44

Print Page