Affiliate: Claritee your landing page before building it!

The use of borders in UI/UX design can be invaluable in allowing elements on the page to serve the user well. It provides a sense of perspective on the page and how the user interacts with the element on the page.

Maybe you ever use a dashed-line to create a flow section like a "how its works" process or just to pleasing the style and look.

Customizing the spacing between the dashed lines is pretty easy to achieve from the design editor. Just change the array number to find the preferred dashed line looks.

I just realized in the CSS syntax that there are no CSS properties to control the spacing and the length of the lines.

In basic CSS syntax, you usually write border: 1px dashed #000000; or directly using border-style property like border-style: dashed; to create border line on an element.

If you take a look on this Stackoverflow post, there is an explanation of some methods that can be use to create dashed line.

My main focused on his pros and cons is the browser combability. I see that the SVG methods is the best one. All browser are supported with this SVG properties.

You can use path or polygon to create the border line then adjust the stroke-dasharray to customize the spacing and the range of the border stroke.

The easiest alternative is you can use this generator below to create and adjust those properties.

Dashed Border Generator by @kovart
With this tool you can simply increase space between dots, change dash length or distance between strokes.

Take a look and play with it!

Let me know your thought or you find a mistake/outdated content for this post.

Get the latest update of tutorials, inspirations and useful resources for website design and development to your email box