-webkit-text-stroke-color

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-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

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

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