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.

We accomplish this core effect by using CSS dotted borders. Dotted borders display as perfect squares in most browsers, as we intended in the Arroyo theme design.

Arroyo in Chrome, with perfectly spaced, square dotted borders. ?

But in Firefox, they’re a bit more amorphous and unpredictable.

Arroyo in Firefox, displaying weird uneven borders. ?

Open the Arroyo demo site in both Chrome and Firefox to see the difference for yourself.

Even in Chrome, they’re not perfect. We found that border dot squares ended up getting bunched together unless we used fixed heights and widths that divided evenly into 4 (the number of square pixels we wanted each dot to be sized at).

Unfortunately, we found no way to ensure a cross-browser square dotted border effect, while at the same time, maintaining our standard for ease of customization with our WordPress themes.

However, we did find a way to ensure a cross-browser square dotted border effect, but you will have to get your hands dirty. We made a free child theme of Arroyo to demonstrate.

Tl;dr: Use SVGs in repeating CSS background images instead of CSS dotted borders to mimic the effect. Look at the Arroyo Ensured Square Dotted Borders GitHub repository to see how we did it.

Make an 8×8 SVG

First, let’s make a super basic SVG to house a 4 pixel by 4 pixel colored square. We’ll use the rect tag to make the square, and an inline fill style to color it.

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

Why 8×8? The remaining space essentially acts as a 4 pixel buffer below and to the right of the colored square, which comes in especially handy for Arroyo, as it uses both horizontal and vertical borders.

As we repeat this image across the X-axis and Y-axis, we’ll see it start to take shape.

Enlarged version of what the above-described 8x8 SVG would look like repeated across a surface area. The gray color represents transparency. — Enlarged version of what the above-described 8×8 SVG would look like repeated across a surface area. The gray color represents transparency.

If your project doesn’t have multiple columns/rows of square dotted borders like Arroyo does, you can probably get away with a 4×8 or 8×4 rectangle with four square pixels of color and four square pixels of transparency.

The #00aeef represents the blue color seen in all of the square dotted borders throughout Arroyo. Unfortunately, we won’t be able to override the fill color value without going into the SVG file itself and changing it there.

Since we’re using the SVG as a background image, and not including the SVG directly in the document, assigning a new fill value elsewhere in a CSS stylesheet won’t work. This also makes it off-limits to JavaScript manipulation.

Override all of the dotted borders, replace with a repeating background image

We can use this SVG as part of a repeating CSS background image to effectively mimic a dotted border effect.

There’s several places we’ll have to override this in our child theme stylesheet, but here’s an example to give you an idea:

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

This assumes the border.svg file is placed in the same directory as the stylesheet, as it is in our example child theme.

Note that CSS backgrounds repeat horizontally and vertically by default, so we don’t have to declare something like background-repeat: repeat; here. The border-width: 0; part makes sure old border dots are removed.

I don’t want to clutter up this post with every single place you have to do it for Arroyo, but you can check out the complete stylesheet file on GitHub for a more thorough look.

A note on CSS filters of SVG background images

While researching for the best way to handle this, I came across this CodePen article which featured a technique that can change the color of background images with pure CSS.

As we covered before, we can’t change the fill color value of a SVG background image with custom CSS, but we can change the color with a CSS filter.

This is a strange concept to wrap your head around, but instead of choosing a color with a hex code value, you have to set a degree “rotate” the color wheel to get a new color.

You are able to change the color of an SVG used in a CSS background image with something along the lines of the following CSS:

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

There are many other color-changing filters to choose from, as demonstrated in the below Pen, but no way to explicitly set a new color with a hex code.

See the Pen Colored SVG background-image – Filter Method by Noah Blon (@noahblon) on CodePen.

I’m still not exactly sure how to calculate hue rotation to land on a specific color, but here’s a relevant Stack Overflow discussion you can dig into if you’re curious. Perhaps there’s a way to create a “hue rotation” calculator.

Until I can come up with a more coherent way to describe setting an exact color using the CSS hue rotation filter, it’s probably best to just edit the SVG directly if you need to customize the color of your ensured square border dots.

That’s pretty much it

So there you have it. If you use Firefox as your primary browser and their blob-like dotted borders are really bothering you, this is a semi-customizable way around it.

I’m not the first person to notice dotted border weirdness in different browsers. This Medium article discusses it as well, and suggests using a combination of SVGs and the border-image property.

We decided to leave this out of the main version of the theme because while you can technically change the color with custom CSS, determining the “hue rotation” for a desired color is simply not intuitive enough at this time.

Customizing the color with a known hex code requires going into the actual SVG file and changing the inline fill color there. This makes it unsuitable for hosted platforms like WordPress.com where the user has no access to alter such values.

It’s also not the best experience for self-hosted users who would be more comfortable adding a little bit of custom CSS to change a hex code value through a plugin like Jetpack, than going through the trouble of installing a child theme and then editing code, or manually calculating a hue rotation.

Ultimately, we prioritize ease of customization over making sure everything looks exactly the same in every browser. Hopefully the Arroyo Ensured Square Dotted Borders child theme (yes, I realize what a mouthful that is) allows for the best of both worlds.