Contour de texte en CSS avec text-stroke ou text-shadow

12 avril 2026

Temps de lecture estimé : 2 minutes

Un contour de texte en CSS permet d’ajouter une bordure esthétique et accrocheuse autour du texte, le rendant plus visible et distinctif. Cette technique est particulièrement utile pour mettre en valeur des titres en WebDesign, des mots clés ou des sections importantes de contenu.

En CSS, deux propriétés principales permettent de créer un contour de texte :

text-shadow : Crée une série d’ombres déportées autour du texte, simulant un effet de contour.
text-stroke : Ajoute une bordure solide autour du texte.

Texte en gris avec contour bleu

Utiliser la propriété `text-shadow` pour un contour de texte

La propriété text-shadow prend plusieurs valeurs pour définir l’apparence du contour :

offset-x et offset-y : Définissent le décalage horizontal et vertical des ombres par rapport au texte.
blur-radius : Contrôle le flou des ombres. Une valeur plus élevée crée un contour plus flou.
color : Spécifie la couleur du contour.

Exemple de contour simple avec `text-shadow`

Ce code fournit un contour noir à un texte en blanc.

p {
    text-shadow: -1px -1px 0 #000,  /* Contour en noir */
                  1px -1px 0 #000,
                 -1px 1px 0 #000,
                  1px 1px 0 #000;
    font-size: 30px;
    color: #fff;  /* Texte en blanc */
}

Texte avec contour avec la propriété text-shadow

Utiliser la propriété `text-stroke` pour un contour de texte

La propriété text-stroke est plus simple que text-shadow et ne prend que deux valeurs :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

stroke-width : Définit l’épaisseur du contour.
stroke-color : Spécifie la couleur du contour.

p {
    -webkit-text-stroke: 1px #C00;  /* Contour en rouge */
    text-stroke: 1px #C00;  /* Contour en rouge */
    font-size: 30px;
    color: #777;  /* Texte en gris foncé */
}

Cet exemple crée un contour rouge de 1 pixels d’épaisseur.

Texte avec contour avec la propriété text-stroke

La prise en charge des propriétés text-shadow et text-stroke varie selon les navigateurs. Il est recommandé de tester votre code sur différents navigateurs pour vous assurer d’une compatibilité optimale.

L’utilisation excessive de contours de texte peut rendre votre page web difficile à lire. Il est important de l’utiliser avec modération et de choisir des couleurs et des styles qui s’harmonisent avec le design global de votre site.

En maîtrisant text-stroke et text-shadow, vous gagnez une palette puissante pour styliser vos titres et textes en CSS, que ce soit pour des contours nets ou des ombres subtiles.

👉 Pour aller plus loin avec les effets de texte :

Bien que les supports des propriétés varient selon les navigateurs, ces méthodes restent des outils simples et créatifs pour enrichir vos designs sans recourir à des images ou à du JavaScript.