-webkit-text-stroke-color

Baseline Widely available

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é -webkit-text-stroke-color permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de color qui sera utilisée.

Syntaxe

css

/* Valeurs de couleur */
/* Type <color>       */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/* Valeurs globales */
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: revert;
-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;

Valeurs

<color>: La couleur du contour pour les lettres.

Définition formelle

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	couleur calculée
Type d'animation	une couleur

Syntaxe formelle

-webkit-text-stroke-color = 
  <color>

Exemples

Varier la couleur du trait

HTML

html

<p>Texte avec un contour</p>
<input type="color" value="#ff0000" />

CSS

css

p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000;
  /* Cette valeur peut être modifiée */
}

const colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", (evt) => {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});

Résultat

Spécifications

Specification
Compatibility # the-webkit-text-stroke-color

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨13 sept. 2025⁩ par les contributeurs du MDN.

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