CSS text-decoration Property

CSS text-decoration property specifies the style and color for a decoration line. It is a shorthand of the below three properties:

Example:

.p1{
  text-decoration: underline;
}
.p2{
  text-decoration: underline red wavy;
}
.p3{
  text-decoration: overline blue dotted;
}
.p4{
  text-decoration: line-through;
}
.p5{
  text-decoration: underline overline;
}

CSS Syntax

The text-decoration property has the below syntax:

text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;

Property Values

The text-decoration property accepts the following values:

text-decoration-lineSpecifies the type of text decoration line such as underline, overline, line-through, etc.
text-decoration-colorSpecifies the color of the text decoration line. The color can be specified in any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.
text-decoration-styleSpecifies the style of the text decoration line such as ‘solid’, ‘dotted’, ‘wavy’, etc.
initialSets the text-decoration property to its default value.
inheritInherits the text-decoration property from its parent element.

General Info

Default Valuenone currentColor solid
InheritedNo
JavaScript Usageelement.style.textDecoration = “underline”;