Avatar of Geoff Graham
Geoff Graham on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The higher the number, the more space in between dashes in the stroke.

.module {
  stroke-dasharray: 5;


  • This will override a presentation attribute <path stroke-dasharray="5" ... />
  • This will not override an inline style e.g. <path style="stroke-dasharray: 5;" ... />


The stroke-dasharray property can accept any length, including unitless values:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Unitless values are likely the most common choice, as it is generally with SVG values. They become length units that are relative to the coordinate system set up by the viewBox.

See the Pen stroke-dasharray property by CSS-Tricks (@css-tricks) on CodePen.

Getting Tricky with stroke-dasharray

Have you ever seen those cool demos where an SVG shape appears to draw itself? That’s a trick that takes the stroke-dasharray of an element and animates it in conjunction with the stroke-dashoffset property.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;

@keyframes dash {
  to {
    stroke-dashoffset: 0;

See the Pen Basic Example of SVG Line Drawing, Backward and Forward by Chris Coyier (@chriscoyier) on CodePen.

We cover this technique in much more detail in this post. It looks like IE 11 and down doesn’t like animating the stroke properties with @keyframes, so be careful there.


More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yes Yes Yes Yes 9+ 4.4+ Yes