Propriété CSS stroke-linecap

La propriété stroke-linecap définit les point du début et de la fin d'une bordure sur un élément.

Valeur initiale	butt
Appliquée à	Formes de contenu de texte.
Héritée	Oui.
Animable	Non.
Version	SVG 1.1 Specification
Syntaxe DOM	Object.strokeLinecap = "round";

Syntaxe

stroke-linecap: butt | square | round | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-linecap </h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        les liens roses suivantes surlignent 
        la position du chemin pour chaque trait
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la valeur "round":

Exemple

<!DOCTYPE html>
<html>
<head>
  <title>Titre du document</title>
</head>
<body>
  <h2>Exemple de la propriété stroke-linecap</h2>
  <svg viewBox="0 0 6 4">
    <!-- Effect of the "round" value -->
    <path d="M1,1 h4" stroke="#8ebf42"
      stroke-linecap="round" />
    <!-- Effect of the "round" value on a zero length path -->
    <path d="M3,3 h0" stroke="#8ebf42"
      stroke-linecap="round" />
    <!--
      les liens roses suivantes surlignent
      la position du chemin pour chaque trait
      -->
    <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
    <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
    <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
    <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
  </svg>
  </body>
</html>

Essayez-vous-même!

Un exemple avec la valeur"square":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-linecap </h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="square" />
      <!--
        les liens roses suivantes surlignent
        la position du chemin pour chaque trait
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
butt	Termine le trait avec un angle aigu. Sur un sous-chemin de longueur 0, le chemin ne sera pas rendu. C'est la valeur initiale de cette propriété.
square	Étend le trait au-delà de la longueur du chemin.
round	Fait les points du début et de la fin ronds.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.