Почему картинка ложится поверх border-image?

Question

[stichii]

Добрый день! Подскажите почему картинка ложится поверх border-image , вот скрин
нужно что бы картинка была в такой рамке.
Пробую делать через бордер и такая ерунда получается, что картинка ложится поверх border-image.
вот разметка

<img src="img/img_avatar.jpg" class="indian" alt="">

вот стили

.indian {
  border: 30px solid #40c4c8;
  padding: 20px;
  border-image-source: url(../img/border-img.png);
  border-image-slice: 70;
  border-image-repeat: round;
  border-radius: 50%;
  width:306px;
}

Не подскажите из-за чего может быть?

Answer 1

[Алексей]

Я обычно картинку оборачиваю в div с overflow:hidden и таких проблем не испытываю.

Comments

[stichii]

Пробую, все равно та же проблема, можете глянуть, что не так? https://jsfiddle.net/ndk3eLw6/6/

Answer 2

[Elena Novodvorskaya]

codepen
В chrome отображается хорошо, может Вам стоит обратить внимание на поддержку браузерами свойств:
border-image-source
border-image-slice
border-image-repeat

Comments

[stichii]

Тоже хром, вот пример мой https://jsfiddle.net/ndk3eLw6/6/ Все равно не работает( Если просто бордер, то все нормально.

[Elena Novodvorskaya]

stichii: Если можно переделать немного код: codepen.io/ElenaDroueva/pen/dporAO

[stichii]

спасибо!

Answer 3

[Ankhena]

border-radius не влияет на border-image, так что круглые картинки для рамки — единственный способ сделать округлую рамку.

Либо добавлять обертку