CSS text-decoration-thickness Property

❮ Previous Complete CSS Reference Next ❯

Example

Set different thickness of the decoration line for <h1>, <h2>, <h3>, and <h4> elements:

h1 {
text-decoration: underline;
text-decoration-thickness: auto;
}

h2 {
text-decoration: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration: underline;
text-decoration-thickness: 50%;
}

/* Use shorthand property */
h4 {
text-decoration: underline solid red 50%;
}

Try it Yourself »

Definition and Usage

The text-decoration-thickness property specifies the thickness of the decoration line.

Default value:	auto
Inherited:	no
Animatable:	no, see individual properties. Read about animatable
Version:	CSS4
JavaScript syntax:	object.style.textDecorationThickness="5px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
text-decoration-thickness	89.0	89.0	70.0	12.1	75.0

CSS Syntax

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

Property Values

Value	Description
auto	The browser chooses the thickness of the decoration line
from-font	If a font file contains information about a preferred thickness, use that value. If not, behave as auto
length/percentage	Specifies the thickness as a length or %
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS reference: text-decoration property

CSS tutorial: CSS Text Decoration