When I create a grid using a large enough border-radius property on the grid cells and a gap property, gaps appear at the corners inbetween the elements (the red background).
.grid {
display: grid;
grid-template-columns: repeat(3,calc(90vw/3));
grid-template-rows: repeat(3,calc(90vh/3));
background-color: red;
gap: 1vmin;
width: 90vw;
height: 90vh;
}
.cell {
height: 100%;
width: 100%;
background-color: gray;
border: 1vmin solid black;
border-radius: 15px;
}
<html>
<body>
<div class="grid">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</body>
</html>
How would I go about filling these gaps with the same color as my border?