CSS consistent border spacing across browsers

Question

I've created a dashed border-left to go around some content, but after testing it across browsers the spacing across each dash is inconsistent. I've done some searching but haven't been able to find a solution to this.

Chrome:

Firefox:

Styling:

.border {
border-left: 2px dashed black;
border-radius: 10%/200px
}

<div class="border"></div>

You might have success with this: [Control the dashed border stroke length and distance between strokes](https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes) — Peter Krebs, Oct 27 '21 at 11:28
[Normalize.css](https://necolas.github.io/normalize.css/) is a popular library that can keep your CSS consistent across browsers. — Karl H, Oct 27 '21 at 11:29

score 2 · Answer 1 · answered Oct 27 '21 at 11:25

Probably you should look into other ways to achieve consistent border style. Check out this one https://kovart.github.io/dashed-border-generator/

Native CSS properties don't support the customization of border-style. Therefore, we use a trick with an SVG image inside background-image property. The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap. Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have.

CSS consistent border spacing across browsers

1 Answers1