HTML CSS Grenze Bild

Question

Ich versuche, dies zu tun (Bild), aber ich habe 6 Bilder. 1 vertikale Linie, horizontal 1 und 4 für jede Ecke. Aber ich kann nicht behaupten. Hat jemand eine Idee, wie das geht?

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

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

Hier mein Bild (Ergebnis) - https://i.stack.imgur.com/eAw7W.png - Ergebnis

und hier 1 vertikale Linie, horizontal 1 und 4 für jede Ecke

https://i.stack.imgur.com/J42NQ.png - unten rechts

https://i.stack.imgur.com/tAwUA.png - links oben

https://i.stack.imgur.com/b9O80.png - oben rechts

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

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

https://i.stack.imgur.com/v8w57.png - horizontal

https://jsfiddle.net/7rsdvn3e/

Answer 1

Sie müssen so etwas machen: http://imgur.com/U8fmi9r
und dann border-Bild verwenden.

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/