css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)

I'm struggling to find any definitive information on this but I am fairly confident about why this happens.

A 4K screen has such a high pixel density that Chromium is scaling the elements on the page up so that they do not look tiny on the 4K screen. In this case it appears to be using a scaling factor of 1.5. This is clear from your screenshots: both the text and boxes appear about 1.5x larger on the 4K screen.

So why does the 1px border not scale up to 1.5px too? Because it wouldn't look crisp. There seems to be an assumption that when you specify a 1px border, what you really want is the smallest border supported by the screen, so you still get 1px on a 4K screen, and thus it still looks sharp.

Chromium scales for high DPI transparently, so that in the web inspector you still see the original CSS values. So although your 10px font-size is now really being rendered as 15px, it still shows as 10px in the inspector. To show you that the border has not been scaled up, the 1px is divided by 1.5, giving 0.667px.

This behaviour strikes me as sensible, but as a side effect it messes up your positioning. Here are a couple of possible workarounds:

1. Add a 1px border to all the boxes, making the border the same colour as the box where no black border is desired. This will ensure they all line up.
2. Use box-sizing: border-box so that the specified width and height of the boxes includes the border. The default value (content-box) adds the border outside of the specified box size, which is why you currently have an alignment problem.

Why don't you use @media screen and adapt to your necessity?

@media screen and (min-width: 2160px) {border:?