CSS text-decoration-style

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.

Value	Description	Examples
solid	A solid line. Default value.	text-decoration-style: solid;
double	A double line.	text-decoration-style: double;
dotted	A dotted line.	text-decoration-style: dotted;
dashed	A dashed line.	text-decoration-style: dashed;
wavy	A wavy line.	text-decoration-style: wavy;
initial	Sets text-decoration-style to default value.	text-decoration-style: initial;
inherit	Inherits 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.

Solid Line

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

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-style: solid;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Double Line

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

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-style: double;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Dotted Line

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

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-style: dotted;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Dashed Line

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

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-style: dashed;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Wavy Line

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

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-style: wavy;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Conclusion

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

TutorialKart

CSS text-decoration-style