Переполнение, скрытое с помощью border-radius, по-прежнему показывает небольшую границу ⇐ CSS

[Anonymous]

Я пытался создать наложение текста поверх изображения и хотел добавить ко всему этому небольшой радиус границы. Но я заметил, что при добавлении border-radius: 5px и overflow: Hidden к родительскому элементу изображение за наложением все еще показывает небольшую часть своей границы в нижних углах, как будто оно забыло чтобы скрыть там пиксельную линию.

(маленькая серая линия внизу правый угол изображения, стоп-кадр видимый)

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

.main-info {
box-shadow: 0px 0px 3px 2px #221b25c7;
border-radius: 5px;
font-size: 0.75rem;
overflow: hidden;
}

.main-info > .img {
position: relative;
}

.text {
position: absolute;
display: flex;
width: 100%;
bottom: 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
opacity: 1;
color: white;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(3px);
z-index: 5;
line-height: 25px;
}

.text > .limit {
color: white;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
max-width: 100%;
width: 0;
padding: 0 0.5rem;
}

.text > .limit {
text-align: center;
}

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

[url=#]

Hello World

[img]https://placehold.it/272x154[/img]
[/url]

Я подумал просто добавить border-radius к дочерним элементам, но это дало тот же результат.

Подробнее здесь: https://stackoverflow.com/questions/596 ... all-border