Custom CSS Dashed Border Generator

Generate Border

Border Width

Dash Array

Dash
Gap

Line Cap

Border Color

Dash Offset

Border Radius

Copy CSS

Questions & Answers

How this works?

CSS has limited options for dashed border. This generator creates a svg background image that scales to fit your element's size, adjusting this svg's stroke gives you a total control of the element's border.

How to use the Generator?

Most important adjustment is the dash array to create wanted looking border, with dash offset you can adjust starting position of the stroke. Border radius size should match the element's border radius.

Where to put the code?

Add it to those element's style declarations that you want to have a border.