HTML CSS border image

Question

I'm trying to do this (image), but I have 6 images. 1 vertical line, horizontal 1 and 4 for each corner. But I can not-claim. Anybody have an idea how this can do this?

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

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

Here my image(result) - https://i.stack.imgur.com/eAw7W.png - result

and here 1 vertical line, horizontal 1 and 4 for each corner

https://i.stack.imgur.com/J42NQ.png - bottom right

https://i.stack.imgur.com/tAwUA.png - top left

https://i.stack.imgur.com/b9O80.png - top right

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

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

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

https://jsfiddle.net/7rsdvn3e/

Answer 1

You need to make something like this: http://imgur.com/U8fmi9r
and then use border-image.

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/