CSS text-decoration-thickness Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The text-decoration-thickness CSS property is used to control the thickness of the line drawn for text decorations, such as underlines and overlines, on text elements. It allows web developers to specify the thickness of these decorative lines, providing greater control over the visual appearance of text elements on a webpage. This property is valuable for customizing the design of hyperlinks and other text-based indicators, enhancing the overall aesthetics and user experience of a website.

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.textDecorationThickness

Interactive Demo

text-decoration-thickness: 3px;

text-decoration-thickness: 0.4rem;

text-decoration-thickness: from-font;

The rusty swing set creaked.

Syntax

text-decoration-thickness: auto | from-font | <length> | <percentage>

Values

autoThe browser chooses an appropriate width for the text decoration line.
from-fontIf the font file includes information about a preferred thickness, use that value. If the font file doesn't include this information, behave as if auto was set, with the browser choosing an appropriate thickness.
<length>Specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the browser default.
<percentage>Specifies the thickness of the text decoration line as a <percentage> of 1em in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

Example

HTML

<p class="thin">Here's some text with a 1px red underline.</p>

<p class="thick">This one has a 5px red underline.</p>

<p class="shorthand">This uses the equivalent shorthand.</p>

CSS

.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: green;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: green;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid green 5px;
}

Result

Editor