CSS text-decoration-thickness property
- Previous page text-decoration-style
- Next page text-emphasis
Definition and usage
The text-decoration-thickness property specifies the thickness of the decoration line.
See also:
CSS Reference Manual:text-decoration property
CSS Tutorial:CSS Text
Example
Set different thickness of decoration lines for <h1>, <h2>, <h3>, <h4> elements:
h1 { text-decoration: underline; text-decoration-thickness: auto; } h2 { text-decoration: underline; text-decoration-thickness: 5px; } h3 { text-decoration: underline; text-decoration-thickness: 50%; } /* Use shorthand properties */ h4 { text-decoration: underline solid red 50%; }
CSS syntax
text-decoration-thickness: auto|from-font|length/percentage|initial|inherit;
Attribute value
Value | Description |
---|---|
auto | The browser selects the thickness of the decoration line. |
from-font | If the font file contains information about the preferred thickness, use this value. If not, it will be displayed as auto. |
length/percentage | Specifies the thickness as a length value or a percentage value. |
initial | Sets this property to its default value. See initial. |
inherit | Inherits this property from its parent element. See inherit. |
Technical details
Default value: | auto |
---|---|
Inheritance: | No |
Animation creation: | Not supported. See:Animation-related properties. |
Version: | CSS4 |
JavaScript syntax: | object.style.textDecorationThickness="5px" |
Browser support
The numbers in the table indicate the first browser version to fully support this attribute.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
89.0 | 89.0 | 70.0 | 12.1 | 75.0 |
- Previous page text-decoration-style
- Next page text-emphasis