• Articles and Tutorials
• Contact

Custom horizontal rules with CSS

The horizontal rules as they are designed in html with <hr /> looks quite boring, just a simple black line and thats what we are going to do something about, we are going to make some custom designed horizontal rules with css.

First, here is the definition of a horizontal rule using css.

This will output a blue horizontal rule, quite boring, but now we can go in and do something interesting within the brackets. { }

So now we will construct some more interesting horizontal rules.

These first ones are for styling the borders, backgrounds and next we will do some styling including images in the rules.

This will output a horizontal rule with dashed lines, and the noshade tag (note: this noshade tag wont work in all browsers which is quite annoying I think) the noshade gets ride of the background shadow in the rules.

You could also use these border styles for the outline of the horizontal rules.

This is where the hr tag gets interesting, we apply some images to it, and style it, here I made a symbol in Adobe Photoshop 50 by 50 pixels.

Now we can also control the repeated of images, so now we will make the horizontal rule, vertical instead.

Now I think you get the point of what you can do with images in horizontal rules, so the last thing will be to limit the width.

Final thoughts

Even though the horizontal rules now might seem like a very useful tool, it still has a lot of limitations, especially some incompatibility with older browsers.

I found a really nice reference site to show which browsers are compatible with which properties.

aptana.com