Arrow

CSS Text Decoration Style

AuthorHariom Prajapati

Pubish Date01 Sep 2022

categoryCSS

It is use to set the text decoration style like solid, wavy, dotted, dashed, double.

 

Syntax -

text-decoration-style : value ;

 

values

solid

It is use to draw a single line

wavy

It is use to draw a wavy line
dotted
It is use to draw a dotted line.
dashed It is use to draw dashed line.
double It is use to draw double line. 

 

For example -

<html>

<head>
    <title>CSS Text Decoration Style</title>

    <style>
        .solid {
            text-decoration: underline overline;
            text-decoration-style: solid;
        }

        .double {
            text-decoration: underline overline;
            text-decoration-style: double;
        }

        .dotted {
            text-decoration: underline overline;
            text-decoration-style: dotted;
        }

        .dashed {
            text-decoration: underline overline;
            text-decoration-style: dashed;
        }

        .wavy {
            text-decoration: underline overline;
            text-decoration-style: wavy;
        }
    </style>
</head>

<body>
    <p class="solid">its show solid line</p><br>
    <p class="double"> its show double line </p><br>
    <p class="dotted">its show dotted line</p><br>
    <p class="dashed"> it show dashes line </p>
    <p class="wavy"> it show wavy line </p>
</body>

</html>

 

Output

Text Decoration