text-decoration-thickness

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

Syntax

Example:

h3 {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* Shorthand version */
h3 {
  text-decoration: underline solid green 3px;
}

Values

auto
Default value. The browser determines the thickness of the decoration line.

from-font
Behaves as auto unless the font-file contains information about a preferred thickness.

length/percentage
Designates the line thickness as a length unit (px, em, etc.) or percentage.

initial
Sets the property to its default value.

inherit

Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of text-decoration-thickness? Submit a codepen.io demo and we'll showcase it here ↴