Question

How do I create borders from images in CSS/HTML without using CSS3?

I have three border tiles: left, right, bottom. The should show up (repeat-x/y) to the left, to the right and to the bottom of my content container.

I tried to build div containers around my content container, but I could’nt figure out how to set the properties…

Is this even the best way?

Answer 1

Use the following HTML structure: ( explanation below )

<div class="container">

    <div class="left"></div>
    <div class="right"></div>
    <div class="bot"></div>

</div>

And the following CSS:

.container {
    position:   relative;
    padding:    5px; // size of your border images
}

.container .left {
    position:   absolute;
    left:       0;
    top:        0;
    background: url(border_left.jpg) repeat-y;
    width:      5px;
    height:     100%;
}

.container .right {
    position:   absolute;
    right:      0;
    top:        0;
    background: url(border_right.jpg) repeat-y;
    width:      5px;
    height:     100%;
}

.container .bot {
    position:   absolute;
    left:       0;
    bottom:     0;
    background: url(border_bot.jpg) repeat-x;
    width:      100%;
    height:     5px;
}

Basically what you do here is the following:

1. You create a container which is relatively positioned so absolutely positioned elements inside it will be positioned within its boundaries. It also has a padding equal to (could also be higher than) the width / height of the border images to make up for the room they take up.
2. You add three divs inside of the container that get pushed to the left, right and bottom of the container and stretch along the entire width / height.

This jsFiddle illustrates what I’m explaining here, using background colors instead of images.

You can see the borders overlap at the corners, you could fix this by also creating extra images that are positioned in the corners.