If you've ever put an <hr /> element in your Web pages, you'll know how ugly they are and so it's important to style any HR tag you use. A basic HR tag is displayed the way the browser wants to display it. This is usually with a width of 100%, a height of around 2px, and a 3D border making up the line itself.
<hr />
It's ugly.
But it is possible to style the HR so that it looks nice, and actually fits with your page styles. But you have to be careful with it, as there are some browser issues with how it displays.
Width and Height are Consistent Across Browsers
The only styles that are consistent across Web browsers are the width and height styles. These define how large the line will be. If you don't define them the default width is 100% and the default height is 2px.
<hr style="width:50%;" />
<hr style="height:2em;" />
The Border Gets Tricky
In browsers like Opera and Mozilla/Firefox, the browser builds the line using the border. So if you clear out the border:
<hr style="border: none;" />
The line disappears, but in IE, there is still a line visible.
If you change the border, but leave the height and width the defaults, the line will look the same in IE, Firefox and Opera.
<hr style="border: 1px solid #000;" />
But if you change the border and the height, the styles look slightly different in IE from Firefox and Opera (note the thin grey line inside the border of the line).
Change the border, height and width.
<hr style="height:1.5em;width:25em;border:1px solid #000;" />
Changing the Color of the Line Can be Difficult Too
Internet Explorer treats the color of the line as a foreground color and so changes the color of the line when you change the color property. But Firefox and Opera treat the color of the line as a background color and don't change unless you use the background-color property.
<hr style="color:#c00;" />
Changing the background-color property.
<hr style="background-color:#c00;" />
You need to change them both to have it display the same in IE and Firefox.
<hr style="color:#c00;background-color:#c00;" />
Of course, it still doesn't work in Opera, because Opera needs a height defined as well before it will change the color of the line.
<hr style="color:#c00;background-color:#c00;height:1px;border:none;" />
Changing Where it Floats
This seems like it would be a simple thing to do, just use the float property to push the line to the right or left.
<hr style="width:50%;float:right;" />
But as you can see it doesn't work in Internet Explorer. To get it to work in IE, you need to remove the float style and put in the deprecated attribute align.
<hr style="width:50%;" align="right" />
You Can Also Display a Background Image
Instead of a Color, you can define a background image for your HR so that it looks exactly as you want it to, but still displays semantically in your markup.
<hr style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;border:none;" />
But as we're coming to expect, there is a problem with one of the browsers - IE surrounds the HR with a border. If you turn the border off it looks the same (in fact, the example above has the border turned off). And if you set the color to white (the same color as the background color), the line disappears in IE.
The only solution is something of a hack. Surround the HR with a div, style the div, and set the HR display to none.
<div style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;"><hr style="display:none;" /></div>
Now You Can Style Your HR Elements
One thing that some people do instead of using the HR tag is to rely on borders of other elements. But sometimes an HR is a lot more convenient and easier to use than trying to set up borders. The box model issues of some browsers can make setting up a border even trickier.
