svg / latest / attribute / stroke-linecap.html /

stroke-linecap

The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.

Note: As a presentation attribute stroke-linecap can be used as a CSS property.

You can use this attribute with the following SVG elements:

Example

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">

  <!-- Effect of the (default) "butt" value -->
  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
        stroke-linecap="butt" />

  <!-- Effect of the "round" value -->
  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
        stroke-linecap="round" />

  <!-- Effect of the "square" value -->
  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
        stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>

Usage notes

Value butt | round | square
Default value butt
Animatable discrete

butt

The butt value indicates that the stroke for each subpath does not extend beyond its two endpoints. On a zero length subpath, the path will not be rendered at all.

Example

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">

  <!-- Effect of the "butt" value -->
  <path d="M1,1 h4" stroke="black"
        stroke-linecap="butt" />

  <!-- Effect of the "butt" value on a zero length path -->
  <path d="M3,3 h0" stroke="black"
        stroke-linecap="butt" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

round

The round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero length subpath, the stroke consists of a full circle centered at the subpath's point.

Example

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">

  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black"
        stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black"
        stroke-linecap="round" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

square

The square value indicates that at the end of each subpath the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke. On a zero length subpath, the stroke consists of a square with its width equal to the stroke width, centered at the subpath's point.

Example

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">

  <!-- Effect of the "square" value -->
  <path d="M1,1 h4" stroke="black"
        stroke-linecap="square" />

  <!-- Effect of the "square" value on a zero length path -->
  <path d="M3,3 h0" stroke="black"
        stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'stroke-linecap' in that specification.		 Candidate Recommendation Definition for shapes and texts
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'stroke-linecap' in that specification.		 Recommendation Initial definition for shapes and texts

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
stroke-linecap
?
?
?
?
?
?
?
?
?
?
?
?

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

Name SVG
Version
Badge
Last Updated 2022-04-20T18:11:01Z