CSS3 border-image не повторяется

Question

На моем сайте <div> имеет border-image. Я сгенерировал код с помощью выравнивания www.border-image.com

HTML

<div class="header"> 
</div> 

CSS

.header { 
    height: 75px; 
    background: rgb(50,50,50); 
    border-style: solid; 
    border-width: 30px; 
    -moz-border-image: url('img/border.png') 30 round; 
    -webkit-border-image: url('img/border.png') 30 round; 
    -o-border-image: url('img/border.png') 30 round; 
    border-image: url('img/border.png') 30 round; 
} 

Проверено на Chrome и Safari, изображение границы дисплеях прекрасно за исключением того, что это не повторится.

Почему это? Я наткнулся на an old Github thread от 2 лет назад, который предположил, что добавление переменной javascript под названием «Dummy» исправило это. Я попробовал ... И это не сработало. Поэтому я предполагаю, что это шутка для доверчивых людей.

Относительно примечания, возможно ли сделать границу за пределами <div>? Окончательная версия будет иметь белый фон, делая белый border-image невидимым.

Странная ошибка, есть ли решение? Благодарю.

Скриншот Каждая часть границы отображается только один раз, по углам. Они не повторяются по сторонам, как ожидалось. ПРИМЕЧАНИЕ. Я не намеренно включал границы на углах.

Также обратите внимание, что фон вокруг границы, не внутри него.

EDIT: Это границы изображения я используюLink

Answer 1

Что ваше изображение выглядит как?

не имеют цвет фона, чтобы заложить под границы, вам нужно вместо того, чтобы использовать окно тень врезку, большой размер и без размытости

.header { 
    height: 75px; 
    box-shadow:inset 0 0 0 1000px rgb(50,50,50); 
    border-style: solid; 
    border-width: 30px; 
    border-style: solid; border-width: 15px 16px 15px 15px; 
    -moz-border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 repeat; 
    -webkit-border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 repeat; 
    -o-border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 repeat; 
    border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 fill repeat; 
     } 

http://www.border-image.com/#{%22src%22%3A%22http%3A%2F%2Fi.imgur.com%2FpWUNoki.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A[0%2C0%2C0%2C0]%2C%22imageOffset%22%3A[15%2C15%2C15%2C15]%2C%22fill%22%3Afalse%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A[%22round%22%2C%22round%22]%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue}