Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Propriété CSS -webkit-text-stroke

Baseline
Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.

La propriété raccourcie CSS CSS -webkit-text-stroke définit la largeur et la couleur du contour des caractères du texte.

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

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>

La largeur du tracé du texte.

<color>

La couleur du tracé du texte.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéeoui
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

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

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

Exemples

Ajouter un contour rouge au texte

HTML

html
<p id="exemple">Un texte avec un bordure</p>

CSS

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

Résultat

Spécifications

Spécification
Compatibility
# the-webkit-text-stroke

Compatibilité des navigateurs

Voir aussi