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

Question

I have two divs on a website: one has a 1px wide border; the other div has a 2px wide border.

When I change the zoom below 100% (exact value differs based on browser and I assume screen resolution, etc.) the 2px div looks exaktly like the 1px div. (happens in IE and Chrome)

Is there a way to keep the width of the border at 2px regardless of the zoom? Or does someone have a different/better suggestion to retain the ratio of the border-width between the divs?

Answer 1

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%.

Answer 2

There are 2 ways of "zooming" in Browsers:

The original attempt/feature to implement zooming was the ability to change the root font size in browsers (default 16px), which could then be used by developers to implement custom logic how to deal with different root font sizes (e.g. mix relative length units em and rem with fixed ones). Unfortunately most developers disable this feature by setting a fixed root font size. Therefore nearly nobody uses it (even though it would give developers full control)

The second and nowadays mainly used zooming feature (as it simply works) is the mentioned zoom of everything. Everything simply gets larger or smaller. You have no possibility to control this.

Answer 3

I don't recommend you worry with that, but if it's really important for you, you can capture current browser zoom info and calc your CSS based on that.

i.e: if current browser zoom is in 80% you need to increase the div CSS zoom property in 25% (*1.25).

Tips: How to detect page zoom level in all modern browsers?