A DIV Border Using line.gif
How to make a decorative Div with a left edge border using an image called line.gifPublished Aug 17, 2005 by lobo235
Last updated on May 19, 2009
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:
<div class="leftline"><p>Text Here</p></div>
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 the test DIV. As you can see, it has our border going down the left-hand side and the border only repeats itself vertically. The zig-zag border you see is our line.gif image. This is a pretty neat trick and it's easy to do.
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.
1 comment for this article.add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Making AJAX Easier
Persistent Login Cookies Done Right