The text-decoration
shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line
, text-decoration-color
, text-decoration-style
, and the newer text-decoration-thickness
property.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration. For example, in the markup <p>This text has <em>some emphasized words</em> in it.</p>
, the style rule p { text-decoration: underline; }
would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; }
would not cause any change; the entire paragraph would still be underlined. However, the rule em { text-decoration: overline; }
would cause a second decoration to appear on "some emphasized words".
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
The text-decoration
property is specified as one or more space-separated values representing the various longhand text-decoration properties.
Values
text-decoration-line
- Sets the kind of decoration used, such as
underline
orline-through
. text-decoration-color
- Sets the color of the decoration.
text-decoration-style
- Sets the style of the line used for the decoration, such as
solid
,wavy
, ordashed
. text-decoration-thickness
- Sets the thickness of the line used for the decoration.
Formal definition
Initial value |
as each of the properties of the shorthand:
|
Applies to | all elements. It also applies to ::first-letter and ::first-line .
|
Inherited | no |
Computed value |
as each of the properties of the shorthand:
|
Animation type |
as each of the properties of the shorthand:
|
Formal syntax
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>
Examples
Demonstration of text-decoration values
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
as links generally are by default. Be careful when removing
the text decoration on anchors since users often depend on
the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
depending on the browser you use.</p>
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 4 | Working Draft | Adds text-decoration-thickness ; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
|
CSS Text Decoration Module Level 3The definition of 'text-decoration' in that specification. | Candidate Recommendation | Transformed into a shorthand property. Added support for the value of text-decoration-style .
|
CSS Level 2 (Revision 1)The definition of 'text-decoration' in that specification. | Recommendation | No significant changes. |
CSS Level 1The definition of 'text-decoration' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
|
Chrome
No support No |
Edge
No support No |
Firefox
No support 1 — 23 |
IE
No support No |
Opera
No support 4 — 15 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support 4 — 23 |
Opera Android
No support 10.1 — 14 |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Shorthand | Chrome
Full support 57 |
Edge
Full support 79 |
Firefox Full support 36 Full support 36 Partial support 6 |
IE
No support No |
Opera
Full support 44 |
Safari Full support 8 Full support 8 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android
Full support 57 |
Chrome Android
Full support 57 |
Firefox Android Full support 36 Full support 36 Partial support 6 |
Opera Android
Full support 43 |
Safari iOS Full support 8 Full support 8 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android
Full support 7.0 |
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 70 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- The individual text-decoration properties are
text-decoration-line
,text-decoration-color
, andtext-decoration-style
. - The
list-style
attribute controls the appearance of items in HTML<ol>
and<ul>
lists.
text-decoration by Mozilla Contributors is licensed under CC-BY-SA 2.5.