CSS text-decoration Property
Example
Set text decoration for h1, h2, h3, and h4 elements:
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
Property Definition and Usage
The text-decoration property specifies the decoration added to text, such as underline, overline, line-through, etc.
The text-decoration property is a shorthand for the following three properties:
Syntax
/* Keyword values */
text-decoration: none; /* No text decoration */
text-decoration: underline red; /* Red underline */
text-decoration: underline wavy red; /* Red wavy underline */
/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
| Default value: | none |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS1 |
| --- | --- |
| JavaScript syntax: | object.style.textDecoration="overline" |
| --- | --- |
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 |
Property Values
| Value | Description |
|---|---|
| none | Default. Defines standard text. |
| underline | Defines a line under the text. |
| overline | Defines a line over the text. |
| line-through | Defines a line through the text. |
| blink | Defines blinking text. |
| inherit | Specifies that the value of the text-decoration property should be inherited from the parent element. |
More Examples
Example
h1.under {
text-decoration: underline;
}
h1.over {
text-decoration: overline;
}
p.line {
text-decoration: line-through;
}
p.blink {
text-decoration: blink;
}
a.none {
text-decoration: none;
}
p.underover {
text-decoration: underline overline;
}
Example
Dotted and wavy lines:
h1 {
text-decoration: underline overline dotted red;
}
h2 {
text-decoration: underline overline wavy blue;
}
Related Articles
CSS Tutorial: CSS Text