CSS text-decoration Property

Description

The text-decoration property is a shorthand for setting text-decoration-line, text-decoration-color, and text-decoration-style in one declaration. Omitted values are set to their initial values.

Initial value: none
Applies to: All elements
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: See individual properties
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.textDecoration

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

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

3	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	10.1	1	1.0

Last updated by CSSPortal on: 2nd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu