1. Technology

Your suggestion is on its way!

An email with a link to:

http://webdesign.about.com/od/examples/l/bl_aa010307.htm

was emailed to:

Thanks for sharing About.com with others!

Styling Horizontal Rules with CSS

Examples

Examples of how to style the HR tag with CSS.

Return to Styling Horizontal Lines with CSS Article.

Plain HR Tag with No Styles

This HR tag has no styles applied to it.


Return to Styling Horizontal Lines with CSS Article.

Change the Width of the HR

This HR tag is half the width of the container element.


Return to Styling Horizontal Lines with CSS Article.

Change the Height of the HR

The HR is 20px and I made the background color black so that you could see it more easily.


Return to Styling Horizontal Lines with CSS Article.

Removing the Border from the HR Makes it Essentially Disappear

There are three HR tags here, the first is just a plain HR, the second has a border of “none“ and the third has no border, but a gray background color.




Return to Styling Horizontal Lines with CSS Article.

Change the Border

I made the border red, dashed and 1px wide.


Return to Styling Horizontal Lines with CSS Article.

Change Border, Height, and Width

Adding some height and width to the border will change the line again.


Return to Styling Horizontal Lines with CSS Article.

Change the Color Property Changes the Edge of the Line

By making the height of the line 5px you can more easily see what the color property changes.


Return to Styling Horizontal Lines with CSS Article.

Change the Background Color Property

Again, adding some height makes it easier to see.


Return to Styling Horizontal Lines with CSS Article.

Change Both Colors to Look Better in More Browsers

Look closely and you'll see that the edge of this line is green, not red.


Return to Styling Horizontal Lines with CSS Article.

Some Older Versions of Opera Needs the Height Defined and Border Removed to Show Color


Return to Styling Horizontal Lines with CSS Article.

Change Where it Floats

I prefer my lines separating content to align the same as the content. So for most text (in English) that means left-aligned, rather than centered. However, to see this, you also need to change the width of the line.


Return to Styling Horizontal Lines with CSS Article.

Some Older Versions of IE Need an Obsolete Attribute (align) to Float the Lines


Return to Styling Horizontal Lines with CSS Article.

Display a Background Image

One fun thing you can do is replace your line with an image. This gets an effect similar to books with section breaks.


Return to Styling Horizontal Lines with CSS Article.

Some Older Versions of IE Need a Div with the Background Image


Return to Styling Horizontal Lines with CSS Article.

©2014 About.com. All rights reserved.