Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>CSS zoom applies to border-width when specified and inherited</title>
<style>
body {
--scale: 1;
}
.box {
width: calc(60px * var(--scale));
height: calc(60px * var(--scale));
border: calc(8px * var(--scale)) solid red;
margin: calc(10px * var(--scale));
display: inline-block;
font-size: calc(16px * var(--scale));
}
.box-rem {
width: calc(60px * var(--scale));
height: calc(60px * var(--scale));
border: calc(0.5rem * var(--scale)) solid blue;
margin: calc(10px * var(--scale));
display: inline-block;
font-size: calc(1rem * var(--scale));
}
.zoom {
--scale: 2;
}
</style>
<div class="box">unzoomed px</div>
<div class="box-rem">unzoomed rem</div>
<div class="zoom">
<div class="box">zoomed px</div>
</div>
<div class="zoom box">zoomed inherited px</div>
<div class="zoom box-rem">zoomed inherited rem</div>