text-decoration-style

La propriété text-decoration-style définit le style appliqué sur les lignes visées par text-decoration-line. Le style s'applique à toutes les lignes définies avec text-decoration-line.

Note : Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.

Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple <del> ou <s>). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.

La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

Syntaxe

/* Valeurs avec des mots-clés */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Valeurs globales */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Valeurs

solid: Dessine une ligne.
double: Dessine une double-ligne.
dotted: Dessiner une ligne avec des points.
dashed: Dessine une ligne avec des tirets.
wavy: Dessine une ligne ondulée.

Syntaxe formelle

solid | double | dotted | dashed | wavy

Exemples

CSS

.exemple {    
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;    
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

<p class="exemple">Et voilà le résultat.</p>

Résultat

Spécifications

Spécification	État	Commentaires
CSS Text Decoration Module Level 3 La définition de 'text-decoration-style' dans cette spécification.	Candidat au statut de recommandation	Définition initiale. La propriété `text-decoration` n'était pas une propriété raccourcie auparavant.

Valeur initiale	`solid`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`text-decoration-style`	Chrome Support complet 57	Edge Support complet 79	Firefox Support complet 36 Support complet 36 Aucun support 6 — 39 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	IE Aucun support Non	Opera Support complet 44	Safari Support complet 12.1 Support complet 12.1 Support complet 8 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 57	Chrome Android Support complet 57	Firefox Android Support complet 36 Support complet 36 Aucun support 6 — 39 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	Opera Android Support complet 43	Safari iOS Support complet 12.2 Support complet 12.2 Support complet 8 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 7.0
`wavy`	Chrome Support complet 57	Edge Support complet 79	Firefox Support complet 6	IE Aucun support Non	Opera Support complet 44	Safari Support complet 8	WebView Android Support complet 57	Chrome Android Support complet 57	Firefox Android Support complet 6	Opera Android Support complet 43	Safari iOS Support complet 8	Samsung Internet Android Support complet 7.0

Légende

Support complet: Support complet
Aucun support: Aucun support
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

La propriété raccourcie text-decoration qui permet, entre autres, de paramétrer text-decoration-style.