-webkit-text-stroke

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨avril 2017⁩.

La propriété -webkit-text-stroke permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés -webkit-text-stroke-width et -webkit-text-stroke-color.

Syntaxe

css

/* Valeurs de largeur et de couleur */ -webkit-text-stroke: 4px navy; /* Valeurs globales */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: revert; -webkit-text-stroke: revert-layer; -webkit-text-stroke: unset;

Valeurs

<length>: L'épaisseur du contour (cf. <length>).
<color>: La couleur du contour (cf. <color>).

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `-webkit-text-stroke-width`: `0` `-webkit-text-stroke-color`: `currentcolor`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `-webkit-text-stroke-width`: une longueur (type `<length>`) absolue `-webkit-text-stroke-color`: couleur calculée
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `-webkit-text-stroke-width`: discrète `-webkit-text-stroke-color`: une couleur

Syntaxe formelle

-webkit-text-stroke = 
 <line-width> ||
 <color> 

<line-width> = 
 <length [0,∞]> |
 thin |
 medium |
 thick

Exemples

Ajouter un contour rouge au texte

CSS

css

#exemple { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; }

HTML

html

<p id="exemple">Le contour de ce texte est rouge.</p>

Résultat

Spécifications

Specification
Compatibility # the-webkit-text-stroke

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

This page was last modified on ⁨13 sept. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content