Style the HR Tag - Learn How to Use CSS to Make Interesting Lines On Your Pages
Changing the Color of the Line Can be Difficult Too
Internet Explorer 7 and lower 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 modern browsers treat the color of the line as a background color and don’t change unless you use the
background-color property. In
this example I changed the color with the
color property:
<hr style="color:#c00;" />
And in
this example I changed the
background-color property:
<hr style="background-color:#c00;" />
For best results you should
change them both to the same color, so that the line appears correct in most browsers:
<hr style="color:#c00;background-color:#c00;" />
Of course, it still doesn’t work Opera 9 and lower because this browser needs a
height defined and the border removed as well before it will change the color of the line:
<hr style="color:#c00;background-color:#c00;height:1px;border:none;" />
Adjust the Location of the Line
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 7 and lower. To get it to work in these versions of IE, you need to remove the
float style and put in the
deprecated attribute
align:
<hr style="width:50%;" align="right" />
