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-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100' height='100' fill='red'/%3e%3c/svg%3e") 30;
border-image-width: calc(8px * var(--scale));
margin: calc(10px * var(--scale));
}
.zoom {
--scale: 2;
}
</style>
<div class="box"></div>
<div class="zoom">
<div class="box"></div>
</div>
<div class="zoom box"></div>