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.
Syntax
text-decoration-line: none|underline|overline|line-through|initial|inherit;
Property values
| Value | Description |
|---|---|
| none | Displays no decoration line. This is default. |
| underline | Displays a line just below the text. |
| overline | Displays a line just above the text. |
| line-through | Displays a line through the middle of the text. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
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.
Syntax
text-decoration-color: color|initial|inherit;
Property values
| Value | Description |
|---|---|
| color | Specifies the color of the text-decoration. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
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.
Syntax
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
Property values
| Value | Description |
|---|---|
| solid | The line is a single, continuous solid line. This is default. |
| double | The line is displayed as a double solid line. |
| dotted | The line is made up of several dots. |
| dashed | The line is made up of a series of small dashes. |
| wavy | The line is a wavy or narrow line. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
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.
Syntax
text-decoration-thickness: auto|from-font|length/percentage|initial|inherit;
Property values
| Value | Description |
|---|---|
| auto | The browser chooses the appropriate thickness for the decoration line. This is default. |
| from-font | If the font file contains information about the desired thickness, that value will be used. Otherwise, it behaves like an auto. |
| length/percentage | Specifies the thickness using a specific length unit (e.g., px, em, rem, etc.) or specifies the thickness as a percentage of 1em of the element's current font size. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
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)
Syntax
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;
Property values
| Name | Value | Description |
|---|---|---|
| text-decoration-line |
none (default) underline overline line-through |
Specifies the type of text decoration to use. |
| text-decoration-color |
red #ff0000, rgb(255,0,0) |
Specifies the color of the text decoration. |
| text-decoration-style |
solid (default) double dotted dashed wavy |
Specifies the text decoration style to use. |
| text-decoration-thickness |
auto from-font length or percentage |
Determines the thickness of the decoration line. |
| initial | initial | Sets the property to its default value. |
| inherit | inherit | The element inherits the property value from its parent element. |
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.