How to make sure the 1px border always show up regardless how much the user zoom in chrome (or any browser)?

I am aware that its a subpixel calculation thing and I read two other SO regarding it (1, 2), however, I wonder if there is an elegant solution for specifically this situation without altering the spec (because I know if I add extra padding around the parent container will avoid it). https://codepen.io/adamchenwei/pen/GxKZpd Where a box has 1-pixel width border and the hover effect's background color somehow override the border itself once user zoomed in at 50% *NOTE: I do realize the actual component I am working on, it disappears when I zoom in around 75%, so please try different percentage while hovering your cursor on each item, to see when the border on the right and bottom disappear in certain zoom level, NOT ALL ZOOM LEVEL will observe it!

Workstation:

I am working on a Macbook pro 15.4 inch with latest Chrome Browser.

CSS

.container {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;
}

.aaa {
  &:hover {
    background-color: beige;
  }
}

HTML

<div class='container'>
  <div class='aaa'>abc</div>
  <div class='aaa'>abc</div>
  <div class='aaa'>abc</div>
</div>

Solution

The only solution I found (see here) that doesn't change the HTML is to use 'thin' instead of '1px' in the CSS. It seems to reliably make a 1px border.

Also, I was not able to replicate the issue with the codepen you shared so in case a future developer sees this and wants to replicate the problem this site consistently produces the bug (for me) when zoomed out.