CSS text-decoration-thickness Property

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

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

<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>
.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;
}

Browser Support

The following table will show you the current browser support for the CSS text-decoration-thickness property.

Desktop
Edge Chrome Firefox Opera Safari
8989707512.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
89796312.21589

Last updated by CSSPortal on: 2nd January 2024