CSS - text-decoration-thickness Property

Quiz

CSS text-decoration-thickness sets the thickness of the text-decoration line (underline, overline, or line-through).

You need to use the CSS text-decoration or text-decoration-line property before using the text-decoration-thickness property.

Syntax

The syntax for the CSS text-decoration-thickness property is as follows:

text-decoration-thickness: auto | from-font | length | percentage | initial | inherit;

Property Values

Value	Description
auto	The browser sets the thickness for the text decoration line.
from-font	It sets the thickness value from the font file containing information about a preferred thickness. If not mentioned in the font file then, behave as auto.
length	It specifies thickness in length.
percentage	It specifies thickness in percentage.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Examples of text-decoration-thickness Property

The following illustrates examples of CSS text-decoration-thickness property values.

Example 1

In this example, we have set different thicknesses for different text decorations.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS text-decoration-thickness Property</title>
    <style>
        .txt1 {
            text-decoration: underline;
            text-decoration-thickness: 5px;
        }

        .txt2 {
            text-decoration: overline;
            text-decoration-thickness: 3px;
        }

        .txt3 {
            text-decoration: line-through;
            text-decoration-thickness: 1px;
        }
    </style>
</head>

<body>
    <h2>CSS text-decoration-thickness Property</h2>
    <p class="txt1">This is a paragraph with a thick underline.</p>
    <p class="txt2">This is a paragraph with a medium overline.</p>
    <p class="txt3">This is a paragraph with a thin line-through.</p>
</body>

</html>

Example 2

In this example, we have used text-decoration-thickness with different measurement units.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS text-decoration-thickness Property</title>
    <style>
        .txt1 {
            text-decoration: underline;
            text-decoration-thickness: 0.2em;
        }

        .txt2 {
            text-decoration: overline;
            text-decoration-thickness: 10%;
        }

        .txt3 {
            text-decoration: line-through;
            text-decoration-thickness: from-font;
        }
    </style>
</head>

<body>
    <h2>CSS text-decoration-thickness Property</h2>
    <p class="txt1">This is a paragraph with a thickness of 0.2em.</p>
    <p class="txt2">This is a paragraph with a thickness of 10% of the text height.</p>
    <p class="txt3">This is a paragraph where thickness is derived from the font.</p>
</body>

</html>

Supported Browsers

Property
text-decoration-thickness	89	89	70	12.1	75

Print Page