Side Border Images

To add full length side borders using images you simply need to nest one element inside the other and then apply background images to opposite sides of each element. The outer element has the left border applied by repeating a background image down the left side. The inner element has the right background image repeated down the right side.

You can the just add some padding to keep the content clear of the borders. Here is a simple example:

This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:

This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:

Code:

.outerx{
width:50%;
margin-left:25%;
border:1px solid #000;
background:#fff url(images/ragged-right.gif) repeat-y left top;
}

.innerx{
background:transparent url(images/ragged-left.gif) repeat-y right top;
width:100%;
padding:1em 0;
}
.outerx p{padding:0 20px;margin:0 0 1em 0}

As you can see from the code above the code is pretty simple and straight forward. You just have to remember that you cannot add a background colour to the inner div otherwise the outer divs side image will be covered up.

As it happens we can get around this quite easily by providing padding on the outer div to preserve the image and then we can apply a background colour as required.

.outerx2{
width:50%;
margin-left:25%;
border:1px solid #000;
background:#d2da9c url(images/ragged-right.gif) repeat-y left top;
padding-left:20px;
}
.innerx2{
background:#d2da9c url(images/ragged-left.gif) repeat-y right top;
padding:1em 1em 1em 0;
}
/* mac hide \*/
* html .innerx2{height:1%}
/* force "layout" in IE */
.outerx2 p{padding:0 10px;margin:0 0 1em 0}

Here is the result of using the above code:

This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:

This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:

The only strange thing in the code is that I have used the star selector hack and the height:1% hack to force "layout" in IE6 and under and although this isn't necessary for this demo it is likely that bugs would appear inside the divs if I hadn't done so. (Better safe than sorry.) You can read more about "layout" in the faq at the Sitepoint Forums.

^ Back to Top ^