Border: 2px double Border: 2px double Border: 2px double Border: 2px double

Published on:

November 26, 2025

Categories:

Obscure CSS⁵, CSS⁸⁹

Current music:

toe —

all i understand is that i don’t understand

Current drink:

Lemongrass, Ginger & Black Pepper tea

I wanted to write a different post today, but did not have time to finish it, oops.

So let me tell you one pretty useless but fun CSS fact.

Look at this:

<div class="square"></div>

.square {
	width: 1em;
	aspect-ratio: 1;
	border: 2px double;
}

On screens with good old 1x resolution this will render with a solid 2px border.

But on systems with retina screens (or similar), this renders in a fully non-interop way:

Interestingly, there is no guidance (as far as I know) about this in the specs. They only say for double:

Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.)

And browsers are free to interpret this as they wish.

Curiously, both Firefox and Chrome also do 1.5px double correctly, in which case it will be two 0.5px-wide borders with 0.5px space between, while 2px results in whole 1px-wide space between those two 0.5px borders.

If only Safari did follow suit… But hey, I mentioned that this is mostly useless fact. But I hope it was at least a bit fun!