Skip to content

How to customize spacing in a dashed border

Let's say you have a dashed border like this:

css
border-bottom: 1px dashed green;

but you want to control the spacing and length of dashes. One mostly readable solution is:

css
border-bottom: 1px solid;
border-image: repeating-linear-gradient(90deg, green, green 6px, transparent 6px, transparent 16px) 1;