Configuring a dashed border in CSS

I routinely forget that there isn't a property for configuring a dashed border in CSS. You can create the border with:

div {
  border-style: dashed;
  /* or with the complete shorthand*/
  border: 1px dashed gray;
}

But sadly, there isn't a way to space out the dashes and the result is a bit left to be desired.

Default dashed border

There is a popular trick in using two svg properties called stroke-dasharray and stroke-dashoffset to create a dashed border effect. This website lets you generate a custom dashed border using a base64 dataURI SVG as a background image. Definitely a bit easier than trying to configure it yourself with those aforementioned SVG properties.

Here's a dashed border I created for an app I'm working on: Custom dashed border

👋 Let me know if you have any other ways to configure a dashed border in CSS.

Looking to learn web development?