CSS text-decoration Property
Example
Set different text decorations for <h1>, <h2>, and <h3> elements:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline
overline;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The text-decoration property specifies the decoration added to text,
and is a shorthand
property for:
- text-decoration-line (required)
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
| Default value: | none currentColor solid auto |
|---|---|
| Inherited: | no |
| Animatable: | no, see individual properties. Read about animatable |
| Version: | CSS1, renewed in CSS3 |
| JavaScript syntax: | object.style.textDecoration="underline" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-decoration | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
CSS Syntax
text-decoration: text-decoration-line text-decoration-color
text-decoration-style text-decoration-thickness|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| text-decoration-line | Sets the kind of text decoration to use (like underline, overline, line-through) | Demo ❯ |
| text-decoration-color | Sets the color of the text decoration | Demo ❯ |
| text-decoration-style | Sets the style of the text decoration (like solid, wavy, dotted, dashed, double) | Demo ❯ |
| text-decoration-thickness | Sets the thickness of the decoration line | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Add more text decoration:
h1 {
text-decoration: underline overline dotted red;
}
h2 {
text-decoration: underline wavy
blue 5px;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Text Decoration
HTML DOM reference: textDecoration property
