CODEWITHSUNDEEP
htmlcss
didsun
didsun

Reputation: 111

HTML CSS border image

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/

Upvotes: 0

Views: 42

Answers (1)

xcanndy
xcanndy

Reputation: 46

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/

Upvotes: 2

Related Questions