Я не могу понять, почему граница, которую я создал, не нарезается в правильные пропорции (CSS)

Question

Я создал границу в GIMP. Угловые срезы 50px x 20px. Однако результат, который я получаю, очень скручен и мал.

Это моя граница

Вот код, который я пытаюсь добавить 500px x 100px DIV:

border-left: 20px solid black; 
border-right: 20px solid black; 
border-image-source: url(http://i.imgur.com/1AUVP8x.png); 
border-image-slice: 20 50; 
border-image-repeat: round; 
border-image-outset: 0px; 

liveweave

Любая помощь очень ценится!

Answer 1

Я не совсем уверен, какой эффект вы делали, но это, похоже, работает.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.lw { 
 
    font-size: 40px; 
 
} 
 

 
div { 
 
    width: 500px; 
 
    height: 100px; 
 
    text-align: center; 
 
    margin: 20px 20px; 
 
    background: pink; 
 
    border-style: solid; 
 
    border-width: 20px 50px 20px 50px; 
 
    border-image: url(http://i.imgur.com/1AUVP8x.png) 20 50 repeat; 
 
} 
 

 
.tall { 
 
    height:200px;

<div> 
 
<p class="lw">Hello Weaver!</p> 
 
</div> 
 

 
<div class="tall"> 
 
<p class="lw">Hello Weaver!</p> 
 
</div>