text-decoration

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the text-decoration-line and text-decoration-style properties.

The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared.

The paint order of the text decoration, i.e. the fill and stroke, is determined by the value of the paint-order attribute at the point where the text decoration is declared.

Note: As a presentation attribute, text-decoration can be used as a CSS property. See the css text-decoration property for more information.

As a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altGlyph>, <text>, <textPath>, <tref>, and <tspan>

<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" text-decoration="underline">Underlined text</text>
  <text x="0" y="40" text-decoration="line-through">Striked-through text</text>
</svg>

Usage notes

Value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
Default value See individual properties
Animatable Yes

For a description of the values, please refer to the CSS text-decoration property.

Specifications

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-decoration' in that specification.
Candidate Recommendation Defines the property as a shorthand for text-decoration-line, text-decoration-style, and text-decoration-color.
Scalable Vector Graphics (SVG) 2
The definition of 'text-decoration' in that specification.
Candidate Recommendation Mainly refers to the definition in CSS Text Decoration 3 turning the property into a shorthand for text-decoration-line and text-decoration-style.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'text-decoration' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decorationChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also