text-decoration-thickness
Quick Summary for text-decoration-thickness
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.
Code Usage for text-decoration-thickness
/* 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: revert; text-decoration-thickness: unset; More Details for text-decoration-thickness
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: revert; 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> .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; } Specifications
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-width-property |
Note: The property used to be called text-decoration-width, but was updated in 2019 to text-decoration-thickness.
See also
text-decoration text-underline-offset Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語中文 (简体) Change language
