Border height changes pixel size when zoomed in

The height of the border around an element on my page is changing heights when you zoom in on the page. The border is defined as 1px. I am seeing the resizing issue on Chrome and IE but not Firefox. What is the source of this problem? The relevant css is below.

Resizing issue shown on Chrome

.highlightHeader{
    border-bottom-color: rgb(184, 34, 46);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: rgb(184, 34, 46);
    border-top-style: solid;
    border-top-width: 1px;
}