When working with a div inside another div and setting overflow to hidden, you may notice a whitespace issue around the border when zooming in and out on Chrome. Firefox handles this situation better, showing white space only in the corners of the border. For a visual comparison, check out these Chrome screenshots and Firefox screenshots.
<style>
.div1 {
border: 10px solid purple;
border-radius: 30px;
height:300px;
width:300px;
overflow: hidden;
position: relative;
}
.div2 {
background: purple;
position: absolute;
height: 400px;
width: 400px;
top: -20px;
left: -20px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
Please note that I am specifically seeking a solution within the existing div structure outlined above. This code snippet is simplified to highlight the issue, as my larger project relies on this layout. Thank you for your help!