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.sstatic.net/eAw7W.png - result

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

https://i.sstatic.net/J42NQ.png - bottom right

https://i.sstatic.net/tAwUA.png - top left

https://i.sstatic.net/b9O80.png - top right

https://i.sstatic.net/6EgUc.png - horizontal

https://i.sstatic.net/DjlME.png - vertical

https://i.sstatic.net/v8w57.png - horizontal

https://jsfiddle.net/7rsdvn3e/

xcanndy · Accepted Answer · 2017-03-10 21:03:22Z

2

You need to make something like this: https://i.sstatic.net/MPixQ.jpg
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/

edited Mar 10, 2017 at 21:03

answered Mar 10, 2017 at 20:57

xcanndy

465 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML CSS border image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related