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

[Anonymous]

Мне нужна помощь с небольшим визуальным сбоем в моем макете.
Я создаю компонент карточки с оранжевым фоном и темным наложением сверху.
Все выглядит нормально, за исключением нижних углов, где оранжевый фон слегка «просачивается» сквозь темный слой — это особенно заметно на экранах с масштабированием или с высоким разрешением.
Вот упрощенная версия моей настройки:

Код: Выделить всё

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