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 value | auto |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Percentages | refer to the font size of the element itself |
Computed value | as specified |
Animation type | by 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-thickness | Chrome No support No | Edge No support No | Firefox
Full support
70
| IE No support No | Opera No support No | Safari Full support 12.1 | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 12.2 | Samsung Internet Android No support No |
percentage values | Chrome No support No | Edge No support No | Firefox Full support 74 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung 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.