Configuring a dashed border in CSS

You can't normally cofigure a dashed border with normal CSS, but there is a unique way.

08/02/2022

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?

While Iā€™m not an official educator, I have past mentorship experience and love teaching and helping prospective developers join the web dev community.

Ā© 2024