CSS stroke-dasharray property

Property values

noneDefault

It represents a continuous pattern of dashes for a stroke path.

stroke-dasharray: none;

Try it { }

length

20

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.

stroke-dasharray: 20px;

Try it { }

length length

10

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;

Try it { }

percentage

5

It represents the size of dashes in percentage. The dashes repeat themselves along the stroke path in an alternate manner.

stroke-dasharray: 5%;

Try it { }