Background-image и border-image у одного элемента

Рейтинг: 3Ответов: 1Опубликовано: 10.04.2015

При использовании одновременно свойств background-image и border-image возникает проблема, что фоновая картинка не залезает под рамку в IE. В chrome/ff/safari - всё нормально. 

div {
  width: 200px;
  height: 200px;
  display: block;
  background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
  border-width: 30px;
  border-style: solid;
  border-width: 13px;
  border-image: url(http://www.norabrowndesign.com/css-experiments/images/border4.png) 13 repeat;
}
<div></div>

css3
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Надо добавить

border-color: transparent;

http://jsfiddle.net/vtzrnL6t/3/ - есть лишние свойства
http://jsfiddle.net/vtzrnL6t/6/ - сокращённый вариант