A DIV Border Using line.gif

Here is a neat trick for decorating your DIV tags. It is easy to add a left-hand border to a DIV using css but it can look a lot better if you use your own image as the border. In this article I will show you how to use an image called line.gif as your border. The line.gif image can be anything you want but remember that it goes on the left hand side so you will want to create it with this fact in mind. You are welcome to use my line.gif if you want. Let's get started.

First things first, you will need to create the css for the DIV. We want to use line.gif as our background image and we want it to only repeat down the left-hand side of our DIV. Also, we don't want our text to sit on top of our line.gif so we need to set a little bit of padding to prevent this. The padding you need will be determined by the width of your line.gif image. Here is the CSS I use for this on my pages:

Now, all you need to do in your HTML is add a DIV and make it have the class "leftline". So you should end up with something like this:

Here is an example of how it works below. Please note that I surrounded the leftline DIV with another DIV to change the width and to center it on the page. I also changed the background to make it look prettier.

Here is a copy of line.gif for those of you who are dying to get your hands on it. You can right-click the image and save it to your computer for your own use. It is a transparent gif so it will work with every background you throw at it (except black of course).

 I hope this article has been useful to you and I would appreciate any feedback you have to offer.