CSS text-decoration-thickness Property
Last Updated :
30 Jun, 2022
In this article, we will discuss the text-decoration-thickness property in CSS.
This property sets the width of the stroke of the decorated line below, above, or through the text. The different values that this option can take are as follows:
- auto: The thickness of the text-decoration line depends on the browser.
- font-file: Some font files include the values for preferred thickness, then the value from the font file is applied, else auto is applied.
- custom values: If the developer wants a custom thickness of the text-decoration, then the value can be provided in the following two formats:
- length: Overriding the thickness applied automatically, the thickness can be applied by using values in units of px, rem, em, pt, etc.
- percentage: Overriding the thickness applied automatically, the thickness can be applied by using percentage values of 1em of the current font. If the whole page has different font sizes, the thickness would be the same as it scales with the font size and independent of actual size.
- global values: These values are globally set and used frequently.
- initial: It's the way to say that reset to default which may be auto or font-file, whichever suits.
- inherit: This value gets the value of line thickness from its next parent.
- unset: This value works as two cases, if the text-decoration-thickness has some inherited value, it will be used, else the initial value will be used.
Syntax:
text-decoration-thickness: auto | font-file | length | percentage | global values;
In the following examples, we have 4 different paragraphs with different classes of auto, font-file, length, percentage. For each of the classes, we have provided the different values and the style is applied accordingly.
Example 1: This example demonstrates the use of text-decoration-thickness with the value of the auto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.auto {
text-decoration-thickness: auto;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:auto
</p>
<p class="auto">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example 2: This example demonstrates the use of the text-decoration-thickness property with the value of the auto. In this case, the output is the same since the auto sets the font-file values and so it becomes the default.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.font-file {
text-decoration-thickness: font-file;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:font-file
</p>
<p class="font-file">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example 3: This example demonstrates the text-decoration-thickness property set with a defined length of 3px.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.length {
text-decoration-thickness: 3px;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:length
</p>
<p class="length">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example 4: This example demonstrates the text-decoration-thickness property set with a defined percentage of 12%.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.percentage {
text-decoration-thickness: 12%;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:percentage
</p>
<p class="percentage">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example 5: This example demonstrates the text-decoration-thickness property set with the initial value. It is used to set an element’s CSS property to its default value. It is the same as none property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.initial {
text-decoration-thickness: initial;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:initial
</p>
<p class="initial">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example 6: This example demonstrates the text-decoration-thickness property set with the inherit value.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.inherit {
text-decoration-thickness: inherit;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:inherit
</p>
<p class="inherit">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example 7: This example demonstrates the text-decoration-thickness property set with the unset value.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.unset {
text-decoration-thickness: unset;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:unset
</p>
<p class="unset">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Supported Browsers: Browsers supporting text-decoration-thickness property are listed below.
- Google Chrome 89
- Microsoft Edge 89
- Mozilla Firefox 70
- Opera 75
- Safari 12.1
Similar Reads
CSS | text-decoration-skip-ink Property
The text-decoration-skip-ink property is used to specify how the underlines and overlines are rendered when they pass through the characters or glyphs. Syntax: text-decoration-skip-ink: auto | none Property Values: auto: This value is used to specify to skip the underlines and overlines that pass th
2 min read
CSS text-underline-position Property
The text-underline-position CSS property specifies the position of an underline on text. It allows control over whether the underline is placed below, above, or at a custom offset from the text. This property enhances text readability and aesthetics, especially in complex layouts. Syntax: The follow
3 min read
CSS text-underline-offset Property
In this article, we'll discuss the text-underline-offset property in CSS. It is used with an underlined text but it's not part of it. To set the offset distance of the underline from its original position. By default, it is set to auto, but we may increase it by specifying the length or percentage.
2 min read
CSS text-emphasis-position Property
The text-emphasis-position property in CSS is used to define the position of the emphasis marks like dots, circles, and lines applied to text. The line height will increases if there isn't enough space for emphasis marks. These marks are used to draw attention to specific text. The emphasis marks ar
3 min read
CSS text-emphasis Property
In this article, we will discuss text-emphasis property in CSS. It is a short-hand property for text-emphasis-style and text-emphasis-color. It applies emphasis properties to characters (except spaces and control characters). Syntax: text-emphasis: text-emphasis-style text-emphasis-color; Properties
1 min read
CSS box decoration break Property
The box-decoration-break property is used to control the box decoration after the fragmentation of the paragraph. It defines the background, padding, border, margin, and clip path of an element that is applied when the box for the element is broken into separated parts. Default Value: slice Syntax:
4 min read
Tailwind CSS Text Decoration
This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-decoration property. This class is used to “decorate†the content of the text. It is essentially decorating the text with different kinds of lines. Text Decora
2 min read
Foundation CSS Prototyping Utility Text-Decoration
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
3 min read
CSS text-justify Property
The text-justify property in CSS controls how text is spaced when text-align: justify is used. It adjusts the space between words or characters to make the text fill the full width of the line. Common options include auto, inter-word, inter-character, and none for better text formatting. Syntaxtext-
4 min read
CSS font-stretch Property
The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face. Syntax: font-stretch: normal|ultra-condensed|extra-condensed|condensed| semi-condensed|semi-expanded|expanded|extra-expanded|ult
2 min read