CSS text-decoration Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The text-decoration CSS property is used to control the visual decoration of text within an HTML element. It primarily defines how text should be styled in terms of underlines, overlines, line-throughs, or even blink effects. Common values for this property include "none" to remove any text decoration, "underline" to add an underline, "overline" to add a line above the text, and "line-through" to strike through the text. You can also combine multiple values to apply different decorations simultaneously. This property is frequently used to enhance the visual appearance of links, emphasizing their clickable nature, but it can be applied to any text content within an HTML document. Individual properties are: text-decoration-line, text-decoration-color, and text-decoration-style.

Initial value: none
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.textDecoration

Interactive Demo

text-decoration: underline;

text-decoration: underline dashed;

text-decoration: underline dashed blue;

text-decoration: wavy underline red;

text-decoration: underline overline green 4px;

The rusty swing set creaked.

Syntax

text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color>

Values

<text-decoration-line>See the text-decoration-line CSS property for values.
<text-decoration-style>See the text-decoration-style CSS property for values.
<text-decoration-color>See the text-decoration-color CSS property for values.

Example

HTML

<p class="test"> text-decoration: underline;  </p> 

<p class="test2"> text-decoration: overline;  </p> 

<p class="test3"> text-decoration: line-through;  </p>

CSS

.test {
   text-decoration: underline;
   color: red; 
}
.test2 {
   text-decoration: overline;
   color: green;
}
.test3 {
   text-decoration: line-through;
   color: blue; 
}

Result

Editor