Почему border-radius плохо скругляет края?

Question

[nezzard]

Добрый день, имеется вот такой пример.
Картинка и над ней через absolute идет background, он почему-то странно себя ведет и картинка которая под ним просвечивается вот таким образом


Перенес код на jsfiddle, но там все хорошо, код идентичный не могу понять в чем проблема
Линк

Comments

[alex]

какой браузер? ОС? firefox win7 - все ок

[nezzard]

У меня на jsfiddle все хорошо, а на локалхосте так, как на скриншоте.

[Сергей delphinpro]

Просто сделайте радиус скругления у псевдоэлемента на 1 пиксель меньше.

[nezzard]

Сергей delphinpro, Мне такой вариант не подходит видны артефакты при бокс шадоу и вообще это не решение проблемы как по мне

Answer 1

[Narts]

Пропишите overflow:hidden

Comments

[nezzard]

Прописан

Answer 2

[Radja7]

На jsfiddle этих краев не видно только из-за того, что высота картинки чуть меньше высоты родительского блока. Если жестко зададите высоту, в данном случае, к классу movie задать height: 450px будет заметен данный артефакт. Это особенность прорисовки border-radius браузерами, в местах закругления он размывается с фоном, что лежит под ним. И если цвет фона блока и фона родительского блока сильно различаются, можем наблюдать полупрозрачную линию цвета фона родителя. В данном примере, фоновый цвет блока, темный градиент, а фоновый цвет родителя белый фон картинки. Отсюда и эта "загадочная" белая линия. Как вариант решения данной проблемы добавить еще один элемент, который перекроет линию:

.movie-bg:before{
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    background-color: #151516;
    border-radius: 15px;
}