CSS Text Decoration
The following properties are about CSS text decoration.
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
CSS Text Decoration Line.
The CSS text-decoration-line property is used to add a decoration line to text.
Text decoration can be done in following ways.
Example
#p1 {
text-decoration-line: overline;
}
#p2 {
text-decoration-line: line-through;
}
#p3 {
text-decoration-line: underline;
}
#p4 {
text-decoration-line: overline underline;
}Click on the "Try it Now" button to see how it works.
CSS Text Decoration Color.
The CSS text-decoration-color property is used to set the decoration color to text.
This can be done in following ways.
Example
#p1 {
text-decoration-line: overline;
text-decoration-color: rgb(0, 81, 255);
}
#p2 {
text-decoration-line: line-through;
text-decoration-color: rgb(0, 183, 255);
}
#p3 {
text-decoration-line: underline;
text-decoration-color: green;
}
#p4 {
text-decoration-line: overline underline;
text-decoration-color: rgb(199, 28, 5);
}Click on the "Try it Now" button to see how it works.
CSS Text Decoration Style.
The CSS text-decoration-style property is used to set the decoration style to the text.
This can be done in following ways.
Example
#p1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
#p2 {
text-decoration-line: underline;
text-decoration-style: double;
}
#p3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
#p4 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
#p5 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
#p6 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}Click on the "Try it Now" button to see how it works.
CSS Text Decoration Thickness .
The CSS text-decoration-thickness property is used to set the decoration thickness of the decoration line.
This can be done in following ways.
Example
#p1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
#p2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
#p3 {
text-decoration-line: underline;
text-decoration-thickness: 20%;
}
#p4 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 4px;
}Click on the "Try it Now" button to see how it works.
CSS Text Decoration Shorthand.
The text-decoration is a shorthand property and sets the following CSS property in a single line.
text-decoration-line(required)text-decoration-color(optional)text-decoration-style(optional)text-decoration-thickness(optional)
This can be done in following ways.
Example
#p1 {
text-decoration: underline;
}
#p2 {
text-decoration: underline red;
}
#p3 {
text-decoration: underline blue double;
}
#p4 {
text-decoration: underline red double 2px;
}Click on the "Try it Now" button to see how it works.