Propriété CSS stroke-width

La propriété CSS stroke-width spécifie spécifie la largeur du contour de l'élément.

Les unités "px" ou "em" ne sont pas demandés.

Valeur initiale	1
Appliquée à	Formes et éléments de contenu de texte.
Héritée	Oui.
Animable	Non.
Version	SVG 1.1 Specification
Syntaxe DOM	Object.strokeWidth = "0.5";

Syntaxe

stroke-width: length | percentage | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="1" />
    </svg>
  </body>
</html>

Essayez-vous-même!

Voyez un autre exemple de la propriété stroke-width:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="3" />
    </svg>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple la largeur du contour est définie comme un pourcentage:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="2%" />
    </svg>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Spécifie la largeur du contour.
percentage	Spécifie la largeur du contour en %.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.