CSS text-decoration property

Property values

text-decoration-line

noneDefault

In this case, there is no text-decoration line.

text-decoration-line: none;

Try it { }

underline

defines a line below the text.

text-decoration-line: underline;

Try it { }

overline

defines a line above the text.

text-decoration-line: overline;

Try it { }

line-through

It represents a line passing through the middle of text horizontally.

text-decoration-line: line-through;

Try it { }

blink

blinks the text between visibile and invisible. Now, it is deprecated. Animation is preferable to blink the text.

text-decoration-line: blink;

Try it { }

text-decoration-style

solidDefault

The text decoration line is a solid line.

text-decoration-style: solid;

Try it { }

double

The text decoration line is double line.

text-decoration-style: double;

Try it { }

dotted

The line consists of series of dotts.

text-decoration-style: dotted;

Try it { }

dashed

The line consists of series of squared shaped dashes.

text-decoration-style: dashed;

Try it { }

wavy

The line is not straight but wavy type.

text-decoration-style: wavy;

Try it { }

text-decoration-color

currentColorDefault

currentColor represents the same color as of text.

text-decoration-color: currentColor;

Try it { }

color-name

Any color name can be used as the value. red value represents red color.

text-decoration-color: red;

Try it { }

rgb value

#000000

It is an rgb value of red color.

text-decoration-color: rgb(0,255,0);

Try it { }

hexadecimal value

#000000

It is an hexadecimal notation of blue color.

text-decoration-color: #0000ff;

Try it { }