Why does the 2px border exceed the 2px height in Firefox and Chrome?

I am trying to create a string in two different ways. One is with a div with a height of 2px and a background (red). The other is with a div that has a 2px top border (blue). Here's the test code:

.line {
  display: inline-block;
  vertical-align: top;
  width: 50px;
}

.height-line {
  height: 2px;
  background: red;
}

.border-line {
  border-top: 2px solid blue;
}
      

        
        
        
      

    

<div class="line height-line"></div>
<div class="line border-line"></div>
      

        
        
        
      

    

These should display the same, but in Chrome you can see that the left div appears to be 1px thicker than the right div. And in Firefox, when you slowly change the height of the browser window, you can see that the height fluctuates between 3px and 2px (you really need to look at the equivalent jsfiddle here to see this behavior in Firefox - I think b / c is the way the display embedded in stackoverflow snippet, it doesn't).

NOTE. My scaling is correctly set to 100% and I tested the same behavior in another developer browser. I am on Windows 7 using Chrome Version 57.0.2987.133. Here's a screenshot:

What's going on here?