CSS: цвет фона просачивается через закругленные углы с наложением ⇐ CSS

[Anonymous]

I need some help with a small visual glitch in my layout.
I’m building a card component that has an orange background and a dark overlay on top.
Everything looks fine except for the bottom corners, where the orange background slightly “bleeds” through the dark layer - it’s especially visible on zoom or high-DPI screens.
Here’s a simplified version of my setup:




body {
background-color: #0E1323
}

.card {
position: relative;
height: 160px;
width: 100%;
border-radius: 15px;
background-color: #FF8B64; /* orange */
}

.card-overlay {
position: absolute;
bottom: 0;
height: 122px;
width: 100%;
background-color: #1C204B; /* dark navy */
border-radius: 15px;
z-index: 100;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... th-overlay