stroke-dasharray
Creates dashed or dotted lines for SVG shapes. You provide a list of numbers that define the length of the dashes and the spaces between them.
Quick example
line.dashed-path {
/* Creates a pattern of 10px dashes and 5px spaces */
stroke-dasharray: 10 5;
}Quick facts
Initial value
noneInherited
Yes
Applies to
a subset of SVG elements (shapes)
Animation type
repeatableList
Values
none stroke-dasharray Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
1+
1.5+
4+
15+