CSS text-decoration-style property

The CSS text-decoration-style property is used to specify the style of the text-decoration to be applied to the HTML element.

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

ValueDefinition
solidSpecifies a solid line
dottedSpecifies a dotted line
dashedSpecifies a dashed line
doubleSpecifies a double line
wavySpecifies a wavy line
inheritInherits 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.


Share Tweet Send
Loading...