CSS text-decoration-thickness Property

The text-decoration-thickness CSS property specifies the thickness of the decoration line used on text in an element. To reflect the thickness property, the text-decoration-line value must be either underline, line-through, or overline.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        text-decoration: underline;
        text-decoration-thickness: auto;
    }
    .ex2 {
        text-decoration: underline;
        text-decoration-thickness: 6px;
    }
    .ex3 {
        text-decoration: underline;
        text-decoration-thickness: 60%;
    }
    .ex4 {
        text-decoration: underline solid #00ab55 80%;
    }
</style>
</head>
<body>

<p class="ex1">This is some text with auto underline.</p>
<p class="ex2">This is some text with 6px underline.</p>
<p class="ex3">This is some text with 60% underline.</p>
<p class="ex4">This is some text with solid underline and color.</p>

</body>
</html>

Preview

Property Values

Value	Description
auto	The thickness of the decoration line is determined by the browser.
from-font	If the font file specifies a preferred thickness, use that value. If not, act like an auto.
length/percentage	The thickness is specified as a length or as a percentage.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
text-decoration-thickness	89.0	70.0	12.1	89.0	75.0

text-decoration-style

text-indent

CSS text-decoration-thickness Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us