Arrow

CSS Text Decoration Thickness

AuthorHariom Prajapati

Pubish Date01 Sep 2022

categoryCSS

It is use to set the text decoration thickness.

 

Syntax -

text-decoration-thickness: value ;

 

values

length / Percent

It is use to set thickness as a length or %

 

For example -

<html>

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

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

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

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

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

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

<body>
    <p class="solid">its show solid line with thickness 5px</p><br>
    <p class="double"> its show double line with thickness 3px </p><br>
    <p class="dotted">its show dotted line with thickness 1px</p><br>
    <p class="dashed"> it show dashes line with thickness 50% </p><br>
    <p class="wavy"> it show wavy line with thickness 10%</p>
</body>

</html>

 

Output

Text Decoration