This property is used to specify the decoration added to text.

• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration

text-decoration-line

This property is used to specify what type of line the decoration will have. We can set this property to none, underline, overline, line-through

We can combine more than one value, like underline and overline to display lines both under and over the text.

Ex:-

h1 { text-decoration-line: underline;}
h1 { text-decoration-line: underline overline;}

text-decoration-style–

This property is used to specify how the line will display.

We can set this property to solid, double, dotted, dashed, wavy.

Ex:-

h1 { text-decoration-line: underline; text-decoration-style: dotted; }

text-decoration-color–

This property is used to specify the color of the text-decoration-line.

Ex:-

h1 { text-decoration-line: underline; text-decoration-color: red; }

text-decoration–

This is shorthand of all three text-decoration properties.

Syntax: –

Selector {text-decoration: text-decoration-line text-decoration-style text-decoration-color}

Ex:-

h1 {  text-decoration: underline dotted red ; }