CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



text-decoration-thickness

The text-decoration-thickness property is used to set the thickness of the line used for text decoration. Text decoration is used to add visual emphasis to text, such as underlining or striking through text. The thickness of the line used for text decoration can be adjusted using this property.

The text-decoration-thickness property can be used with the text-decoration-line property to set the style of the text decoration. The text-decoration-line property is used to set the type of text decoration, such as underline, overline, or line-through. The text-decoration-thickness property is used to set the thickness of the line used for the text decoration.

Here are some examples of how to use the text-decoration-thickness property:

Examples

Example 1: Set the thickness of an underline to 2px

<p style="text-decoration-line: underline; text-decoration-thickness: 2px;">This text is underlined with a 2px line</p>

Example 2: Set the thickness of a line-through to 4px

<p style="text-decoration-line: line-through; text-decoration-thickness: 4px;">This text has a line-through with a 4px line</p>

Example 3: Set the thickness of an overline to 1px

<p style="text-decoration-line: overline; text-decoration-thickness: 1px;">This text has an overline with a 1px line</p>

Example 4: Set the thickness of a dotted underline to 3px

<p style="text-decoration-line: underline; text-decoration-thickness: 3px; text-decoration-style: dotted;">This text is underlined with a dotted line that is 3px thick</p>

Example 5: Set the thickness of a double line-through to 5px

<p style="text-decoration-line: line-through; text-decoration-thickness: 5px; text-decoration-style: double;">This text has a double line-through with a 5px line</p>

As you can see from these examples, the text-decoration-thickness property can be used to create a variety of text decorations with different line thicknesses.

Browser Support

The text-decoration-thickness property is a relatively new CSS property and is not yet supported by all browsers. As of 2021, it is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer.

Conclusion

The text-decoration-thickness property is a useful CSS property for adjusting the thickness of text decorations such as underlines, overlines, and line-throughs. By combining this property with the text-decoration-line and text-decoration-style properties, a wide variety of text decorations can be created with different line styles and thicknesses.

References

Activity