Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines that are specified; there is no way to define different styles for each of the lines defined by text-decoration-line. When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like <del> or <s>. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

Initial valuesolid
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

solid
Draws a single line.
double
Draws a double line.
dotted
Draws a dotted line.
dashed
Draws a dashed line.
wavy
Draws a wavy line.
-moz-none
Draws no line. Use text-decoration-line: none instead.

Formal syntax

solid | double | dotted | dashed | wavy

Examples

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
<p class="wavy">This text has a wavy red line beneath it.</p>

Specifications

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-decoration-style' in that specification.
Candidate Recommendation Initial definition. The text-decoration property is now a shorthand to define multiple related properties.

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support57 ?

36

6 — 39 -moz-

No44 Yes -webkit-
wavy57 ?6 No44 Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support5757 ?

36

6 — 39 -moz-

No44 Yes -webkit-
wavy5757 ?6 No44 Yes

 

See also

  • When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

 

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: fscholz,