HTML CSSの境界線画像

Question

私はこれ（画像）をしようとしていますが、私は6画像があります。 1垂直線、各コーナーの水平1および4。しかし、私は主張することはできません。これはどのようにこれを行うことができます誰も考えている？右下

https://i.stack.imgur.com/tAwUA.png - - ここ

.box { 
    width: 300px; 
    height: 500px; 
    background-color: #000; 
    color: #FFF; 
    border: solid 1px red; 
} 

<div class="box"> 
    text 
</div> 

私の画像（結果） - https://i.stack.imgur.com/eAw7W.png - 各コーナー

https://i.stack.imgur.com/J42NQ.pngに対する結果

、ここで1垂直線、水平1,4左上

https://i.stack.imgur.com/b9O80.png - 右上

https://i.stack.imgur.com/6EgUc.png - 水平

https://i.stack.imgur.com/DjlME.png -

https://i.stack.imgur.com/v8w57.png垂直 - 水平

https://jsfiddle.net/7rsdvn3e/

Answer 1

あなたはこのようなものにする必要があります。 http://imgur.com/U8fmi9r
をして、国境の画像を使用しています。

border: solid 6px; 
-moz-border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 
-webkit-border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 
-o-border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 
border-image: url(http://i.imgur.com/U8fmi9r.png) 6 repeat; 

https://jsfiddle.net/xcanndy/pmcnukex/