border-image-width-ref.html (670B)
1 <!DOCTYPE html> 2 <title>CSS zoom applies to border-width when specified and inherited</title> 3 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 4 5 <style> 6 body { 7 --scale: 1; 8 } 9 .box { 10 width: calc(60px * var(--scale)); 11 height: calc(60px * var(--scale)); 12 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; 13 border-image-width: calc(8px * var(--scale)); 14 margin: calc(10px * var(--scale)); 15 } 16 .zoom { 17 --scale: 2; 18 } 19 </style> 20 21 <div class="box"></div> 22 23 <div class="zoom"> 24 <div class="box"></div> 25 </div> 26 27 <div class="zoom box"></div>