Ensuring cross-browser square-dotted borders

Our new Arroyo theme uses square dotted borders in several areas to add touches of color throughout the design.

CSS dotted borders display as perfect squares in most browsers. But in Firefox, they’re a bit more amorphous and unpredictable.

Tl;dr: Use SVGs in repeating CSS background images instead of CSS dotted borders to mimic the effect.

Make an 8x8 SVG

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8">
	<rect width="4" height="4" style="fill:#00aeef" />
</svg>

Override dotted borders with a repeating background image

.widget-title:after,
.widgettitle:after {
	background: url('border.svg');
	border-width: 0;
}

A note on CSS filters of SVG background images

You can change the color of an SVG background image with a CSS filter:

.selector {
	background: url('path-to-image.svg')
	filter: hue-rotate(220deg) saturate(5);
}

We decided to leave this out of the main version of the theme because determining the “hue rotation” for a desired color is simply not intuitive enough. Ultimately, we prioritize ease of customization over making sure everything looks exactly the same in every browser.