9.8.12

Style the HR Tag - Learn How to Use CSS to Make Interesting Lines On Your Pages

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" />