Inconsistent border width in Chrome

Question

I'm experiencing inconsistent border width when rendering a box with 1px wide border. This is obviously due to browser scaling (I'm on a 2160 x 1440 monitor). While I realize the "a pixel is not a pixel" problem (due to scaling), I still think the width of the border should be the same across all sides of the box, shouldn't it?

This issue occurs on Chrome and IE, but both Firefox and Opera handles it perfectly. As you can see the left and bottom border is a bit wider than the top and right one.

Here's my code:

div {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

<div></div>

Is there a good solution to this?

I will add that I'm on a Surface Pro 3. It might have something to do with scaling in Windows.

Answer 1

As you said, this is related to browser scaling. I see this often inside of Chrome with Windows 10's Display Scaling set to 150%, one of the defaults for UHD monitors.

I'm unsure of the compatibility for Opera and Safari, but this worked in Firefox, Edge, and Chrome for me:

border-width:0.1px;