CSS stroke-dasharray property
CSS stroke-dasharray defines a pattern of dashes for stroke path.
stroke-dasharray : none | length | percentage
It represents a continuous pattern of dashes for a stroke path.
The stroke pattern consists of alternate dashes separated by equal sized spaces. 20px means the pattern consists of dashes each having 20px size. They are separated by the same size as of dashe size i.e. 20px.
The stroke pattern consists of alternate dashes separated by equal sized spaces. The two values represent the sizes of dashes and spaces respectively. 40px 10px means the pattern consists of dashes each having 40px size. The dashes are separated by 10px space.
stroke-dasharray: 40px 10px;
It represents the size of dashes in percentage. The dashes repeat themselves along the stroke path in an alternate manner.
It applies to inline boxes and SVG shapes.
Was this article helpful?