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

Question

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>

Unlookedfor

Answer 1

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.

Alwyn

Using thin does not help for me. – Swarey

You can also use box-shadow to set 1px borders all around an element. For example, if you want black borders: box-shadow: 1px 0 black,-1px 0 black,0 1px black,0 -1px black. Firefox, at least, scales those better than simply setting border: 1px solid black. – Orrery

@NicholasChiang box-shadow solved my problem, thanks men! – Amenable