text-decoration-thickness

The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

Syntax

/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* percentage */
text-decoration-thickness: 10%;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: unset;

Values

auto
The browser chooses an appropriate width for the text decoration line.
from-font
If 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.

Formal definition

Initial valueauto
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Percentagesrefer to the font size of the element itself
Computed valueas specified
Animation typeby computed value type

Formal syntax

auto | from-font | <length> | <percentage>

Examples

Varying thickness

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: red;
  text-decoration-thickness: 1px;
}

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

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

Results

Specifications

Specification Status Comment
CSS Text Decoration Module Level 4
The definition of 'text-decoration-width' in that specification.
Working Draft Initial definition.

Note: The property used to be called text-decoration-width, but was updated in 2019 to text-decoration-thickness.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decoration-thicknessChrome No support NoEdge No support NoFirefox Full support 70
Full support 70
Full support 69
Alternate Name Disabled
Alternate Name Uses the non-standard name: text-decoration-width
Disabled From version 69: this feature is behind the layout.css.text-decoration-width.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari Full support 12.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 12.2Samsung Internet Android No support No
percentage valuesChrome No support NoEdge No support NoFirefox Full support 74IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support
Full support
No support
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also