CSS text-decoration
property is used to decorate the appearance of text using various lines. For example,
span {
text-decoration: underline;
}
Browser Output

Here, text-decoration: underline
underlines the text inside the span
element.
CSS Text Decoration Syntax
The syntax of the text-decoration
property is as follows:
text-decoration: value | initial | inherit;
The commonly used values for text-decoration
are underline
, overline
, line-through
, inherit
, and none
. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration</title>
</head>
<body>
<h1>Text Decoration</h1>
<p class="underline">text-decoration: underline;</p>
<p class="line-through">text-decoration: line-through;</p>
<p class="overline">text-decoration: overline;</p>
</body>
</html>
p.underline {
/* draws a 1px line below the text at the baseline */
text-decoration: underline;
}
p.line-through {
/* draws a 1px line across the text in the middle */
text-decoration: line-through;
}
p.overline {
/* draws a 1px line above the text at the top */
text-decoration: overline;
}
Browser Output

Text Decoration as Shorthand Property
We can also use text-decoration
as a shorthand property to set the color, style, and thickness of the text line. The original syntax of text-decoration
is,
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;
Here,
text-decoration-line
: sets the type of line decoration for our texttext-decoration-color
: sets the color for the line decorationtext-decoration-style
: sets the style of the line specified bytext-decoration-line
text-decoration-thickness
: sets the thickness of the line used in decoration
Let us see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration</title>
</head>
<body>
<h1>Shorthand Text Decoration</h1>
<p>
We can <span>decorate</span> our text using CSS text-decoration
property.
</p>
</body>
</html>
/* shorthand property to set text-decoration*/
p span {
text-decoration: underline wavy red 2px;
}
/* This above code is equivalent to
p span {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-thickness: 2px;
}
*/
Browser Output

Note: The value of text-decoration-line
is required while others are optional.
Different properties associated with text-decoration
Let's see an example of the text-decoration-line
property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-line</title>
</head>
<body>
<p>text-decoration-line: underline;</p>
</body>
</html>
p {
/* underlines the text */
text-decoration-line: underline;
}
Browser Output

The possible values for text-decoration-line
are underline
, overline
, or line-through
.
Let's see an example of the text-decoration-style
property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-style</title>
</head>
<body>
<p>text-decoration-style: dashed;</p>
</body>
</html>
p {
text-decoration-line: underline;
/* sets the line as dashed */
text-decoration-style: dashed;
}
Browser Output

The possible values for text-decoration-style
are solid
, dashed
, dotted
, double
, and wavy
.
Let's see an example of the text-decoration-color
property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-color</title>
</head>
<body>
<p>text-decoration-color: red;</p>
</body>
</html>
p {
text-decoration-line: underline;
text-decoration-style: dashed;
/* sets the color of line to red */
text-decoration-color: red;
}
Browser Output

The value of text-decoration-color
can be specified in any color format color names, RGB
, HSL
, etc.
Let's see an example of the text-decoration-thickness
property,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-decoration-thickness</title>
</head>
<body>
<p>text-decoration-thickness: 4px;</p>
</body>
</html>
p {
text-decoration-line: underline;
/* sets the thickness of line to 4px */
text-decoration-thickness: 4px;
}
Browser Output
