Border Pictures in Html

Question

Below picture is the part of my website which I need to display some data in each boxes.

I imagined each box as div, but I could not figure out how to make stitchy borders. I don't want to use the whole picture in the web site as it would be awkward.

What would be the best way of converting this pic into HTML?

Answer 1

You can use an image as a border with CSS3 by using border-image.

Here's an example, assuming that you have the cross saved as a single image*:

.crossBorder {
    border-width: 30px;
    -webkit-border-image:url(cross.png) 30 repeat stretch;
    -moz-border-image:url(cross.png) 30 repeat stretch;
    border-image:url(cross.png) 30 repeat stretch;
    padding: 30px;
}

*the single image would look something like this

Answer 2

make a seemless tile from the border shown, like this

then give the background as below

demo here html

<div class="div"></div>

css

.div {

    background: url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg),
                url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg),
                url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg),
                url(http://s18.postimg.org/563hmngqd/vzcp_X.jpg);
    background-repeat: repeat-y,repeat-y,repeat-x,repeat-x;                 
    background-position: 0,right top,0 0,0 bottom;
    width: 400px; 
    height: 400px;

}

you will get this

for shadow effect,

-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;