Propriété CSS text-stroke-color

La propriété text-stroke-color définit la couleur du contour (le trait dessiné autour des bords de chaque caractère), indépendamment de la propriété color du texte, qui remplit l'intérieur du glyphe. Associée à text-stroke-width, elle permet de donner au texte un aspect en contour, creux ou bicolore — une technique courante pour les grands titres d'affichage, les logos et les badges.

Cette propriété n'a d'effet que lorsqu'une largeur de contour est définie. Avec une largeur de 0 (la valeur par défaut), il n'y a rien à colorier et aucune différence n'est visible à l'écran.

La valeur initiale est currentColor, ce qui signifie que, jusqu'à ce que vous la définissiez, le contour correspond à la propriété color de l'élément. Ainsi, si votre texte est bleu, le contour sera également bleu.

Quand l'utiliser

Titres en contour — remplissez le texte d'une couleur et appliquez un contour d'une autre couleur pour créer un effet d'emphase.
Texte creux / « fantôme » — définissez color: transparent et reposez-vous entièrement sur le contour, de sorte que seul le trait soit visible.
Lisibilité sur des arrière-plans chargés — un fin contour sombre sur du texte clair (ou inversement) maintient la lisibilité des mots superposés à des images.

Compatibilité avec les navigateurs

Info

text-stroke-color fait partie du standard, mais pour une compatibilité étendue entre navigateurs, vous devez également définir la propriété préfixée -webkit-text-stroke-color. Associez-la toujours à -webkit-text-stroke-width. La propriété raccourcie -webkit-text-stroke définit la largeur et la couleur en une seule déclaration.

Vous pouvez utiliser n'importe quelle valeur de couleur CSS. Consultez les couleurs HTML, la liste complète des noms de couleurs CSS, ou la propriété color pour les formats disponibles.

Valeur initiale	currentColor
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Oui. La couleur est animable.
Version	CSS Text Module Level 4
Syntaxe DOM	object.style.textStrokeColor = "#8ebf42";

Syntaxe

Valeurs de text-stroke-color en CSS

text-stroke-color: color | initial | inherit;

Exemple interactif

L'exemple ci-dessous applique un contour vert au texte et vous permet de modifier la couleur du contour en direct à l'aide d'un sélecteur de couleur. Notez que les propriétés préfixées et non préfixées sont définies ensemble.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
      }
      p {
        margin: 0;
        font-size: 3em;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
        text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
    <input type="color" value="#8ebf42" />
    <script>
      const input = document.querySelector('input[type="color"]');
      const p = document.querySelector('p');
      input.addEventListener('input', (e) => {
        p.style.webkitTextStrokeColor = e.target.value;
        p.style.textStrokeColor = e.target.value;
      });
    </script>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de texte creux (contour uniquement)

Définissez la propriété color du texte sur transparent pour que le remplissage disparaisse et que seul le contour reste visible. Cela produit un effet classique de titre « fantôme » ou en contour uniquement.

<!DOCTYPE html>
<html>
  <head>
    <title>Hollow text with text-stroke-color</title>
    <style>
      h1 {
        font-size: 4em;
        color: transparent;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #1c87c9;
        text-stroke-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Valeurs

Valeur	Description
color	Spécifie la couleur du contour. Les noms de couleur, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriétés associées

text-stroke-width — définit l'épaisseur du contour. Sans largeur, text-stroke-color n'a aucun effet visible.
text-stroke — propriété raccourcie qui définit simultanément la largeur et la couleur du contour.
text-fill-color — contrôle la couleur de remplissage intérieur indépendamment de color.
color — la couleur de texte standard ; également la source de currentColor, la couleur de contour initiale.

Exercice

Pratique

La valeur par défaut de text-stroke-color est la valeur par défaut de la propriété

border-color.color.background-color.