MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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 visées (il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres). La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

/* 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;

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.

Valeur initialesolid
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 57 6.0 (6.0)-39.0 (39.0)-moz
36.0 (36.0)
Pas de support 44 (Oui)-webkit-
wavy 57 6.0 (6.0) Pas de support 44 (Oui)-webkit-
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 57 57 6.0 (6.0)-39.0 (39.0)-moz
36.0 (36.0)
Pas de support 44 (Oui)-webkit-
wavy 57 57 6.0 (6.0) Pas de support 44 (Oui)-webkit-

Voir aussi

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,