CSS text-decoration-style property

text-decoration-style

The text-decoration-style property is used to specify the style of the text-decoration to be used. It can have the following values:

Values

Value	Definition
solid	Specifies a solid line
dotted	Specifies a dotted line
dashed	Specifies a dashed line
double	Specifies a double line
wavy	Specifies a wavy line
inherit	Inherits from the parent element

Wavy underline

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS text decoration</title>
    <style>
    .ms-overline{
        text-decoration-line: overline;
        text-decoration-style: solid;
    }
    .ms-linethrough{
        text-decoration-line: line-through;
        text-decoration-style: dashed;
    }
    .ms-underline{
        text-decoration-line: underline;
        text-decoration-style: wavy;
    }
    </style>
</head>
<body>
    <p class="ms-overline">Solid overline</p>
    <p class="ms-linethrough">Dashed line-through</p>
    <p class="ms-underline">Wavy underline</p>
</body>
</html>

Output

Solid overline

Dashed line-through

Wavy underline

You can also use the shorthand text-decoration property instead.

CSS text-decoration-style property

text-decoration-style

Values

Example

Output

Subscribe

You might also like