HTML Border Thickness on Zoom

Consistent CSS border width with zoom

Most probably, this is a chrome-based browser bug, as the Firefox browser handles/renders it appropriately.

You could report the bug to the chrome team by using this bug report link

Consider making a media query for huge screens (e.g. more than 2k would have different border sizes).

@media screen and (min-width: 2560px) {
  table, table * {
    border: solid 1px black !important;
  }
  /* or */
  * {
    border: solid 1px black !important;
  }
}

You could change the min-width for your liking. Also, it is better to avoid using !important and specify one extra Specificity (class, tag name).

HTML border thickness on zoom

its because of browser, when usinng zoom in browser it will only render how it would look like at choosen zoom level, so if you have 1px border at 110% its 1.1px border. Since you cant show only part of a pixel, it will show either 1px or 2px

border size change if i zoom the page

Chrome is better at sub pixel rendering so the issue is usually not observed, but many browsers will round things to integer number of pixels, which will cause similar problems as this one.

When your border is 2px and you scale by 0.7, you get 1.4px and might be rounded to 1px by some browser (eating up 0.8px considering both sides of the element). When there's lots of rounding piling around (such as paddings, margins, height etc.), you may loose a sum of 2px to 4px which could be quite significant.

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

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.

How to get a 2px wide border regardless of browser zoom with CSS

Turns out there is a way to do it (which requires additional html-tags but no javascript).

Instead of one "div" with a 2px border I created two "divs" with 1px border each. Both are positioned at the same location, but the outer div is 2 pixels wider and higher than the inner one.

That way it looks like one div with a 2px border and this border will stay at 2px when the zoom is below 100%.

Border height changes pixel size when zoomed in

Zooming in/out (using Ctrl+/Ctrl-) is not part of HTML spec. It's something browser manufacturers have developed to let users make the contents bigger/smaller for increased readability or birds-eye-view of the page layout while giving up on pixel-perfect details.

While doing this, content sizes are altered and each browser tries its best at keeping the original aspect as close to original, but zoomed. How each one does it is not controllable in any way. It's a level that's not accessible to the web page/app.

When a client tells you they want the zoomed page to match the design of the non-zoomed one, show them the door and say:

"Please let me show you the door. Pay close attention to its apparent size. You will notice that, as you get closer, its apparent size increases. You are asking me to keep the apparent size constant while you are getting closer to it. Now, please decide if you would you like to use it."

If you want to create a custom zooming mechanism for your app/page, that's entirely possible and you can specify which elements/properties to change and which to remain unchanged. But that's not going to prevent people from using the native browser zoom controls (mentioned above) and you don't have any way of controlling how the browser renders the contents of your page while the page is zoomed. It's done from outside the Document (page) and that's where your control ends.