SVG dotted borders
I've got a design element on my new site that is a dotted line, sometimes used independently in page decoration, and sometimes used as an element border.
I assumed I could just use the CSS property for `border-style: dotted;` as I've done in the past, but was quickly reminded that rendering of the CSS dotted border is very inconsistent across browsers.
Webkit based browsers Chrome and Safari render the dots as square blocks, while Firefox renders them as circular dots, and older versions of IE render as small diamonds LOL.
Preserving the integrity of the aesthetic is important to me for this specific design use case because my visual language is limited to typography, a three tone color palette, the dotted lines, and thickly stroked squares and circles.
So you can tell the graphic designer in me is coming when I say I really want the dot to appear circular as intended. :-D
But there was another problem with the `border-style: dotted;` approach: aligning the element background color in the center of the dots would be impossible, even with CSS `background-clip` property which only allows changing the background clipping to different edges of the box model (content, padding, border, margin).
So I ended up using the CSS border image method with SVG image files. The border image spec gives you a lot of flexibility, especially since it supports SVG, which meant I was able to get my center aligned border dots by simply including the design in the background (see attached file).
You might be wondering if it's worth adding all those extra images that affect page load time for such an ornamental part of the experience. I did anyway.
I decided that since they are very small SVG files with a minimal page load size hit (requests for these are probably more significant to the performance experience than file size), and since my site is just a personal site with relatively not many other images loading in the design, the design addition is worth the performance cost.
Might not do something like this on a typical site with lots of traffic though. :-)
The dribbble shot is a rendered screencap from the browser.
Props to these articles that helped me fine the best solution:
- https://medium.com/@luclemo/creating-true-dotted-borders-with-css-233f296d8145
- https://css-tricks.com/almanac/properties/b/border-image/
And here's the PR on GitHub.