Styling horizontal rules with CSS is fairly intuitive in IE: to change the color, use the color attribute; to change the width and heights, use the width and height attributes.
Styling horizontal rules in other browsers, however, is slightly less intuitive. To change the color of the horizontal rule, you need to change the background-color attribute. However, this still leaves an unsightly shadow effect that the now-deprecated noshade attribute once took care of. This has led many web authors to stop using the <hr /> tag altogether in XHTML, and fake it with borders on empty divs. But there is a simple solution to this problem – turn off the borders on the <hr>!
hr {border-style: none;}
Dotted-line <hr>s
To go one further and have a dotted-line <hr />, set both the color and background-color to match the color of the element it is contained within. Then add a bottom border with the desired pattern (solid, dotted, dashed, etc) to the <hr />, and viola! A dotted horizontal rule:
hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }
-
this was exactly what i was looking for! nice tip!
-
thanks for your tip
-
this is cool – thanks!
i wanted to use these in divs that have various different background colors, so instead of fixing the ‘color’ and ‘background-color’ values I did this:
color:inherit;
background-color:inherit;which works great (in FF and Opera, that I know of – I don’t have IE or Safari right now).
-
Thank you!! I have been looking for this :D
-
beautiful brief stable resolve!
thanx you lot!
it’s really usefull tip! -
Cheers for the guidance, just what I was trying to find out about.
-
You can even set the height to zero: “height: 0″ that way it is transparent if you have a fancy background.
-
GREAT!! This was what I was looking for!!
-
I have been wondering to do like this.
Very good, thanks.
-
Thank you! You are a savior!
-
Brilliant, thanks very much for the tip
-
You just saved my life. I was banging my head against my monitor pretty hard and your solution probably saved my ass, thanks for posting this.
-
Thanks for making this post. I was forced to use an HR, and this made it less painful to do so.
-
Thanks a lot!
A tip: you can also utilize “inherit”, as in the following:
hr {
color:inherit;
background-color:inherit;
border:1px dotted #2B2B2B;
border-style:none none dotted;
}
14 comments
Comments feed for this article
Trackback link: http://www.thatvoodooyoudo.com/css/styling-horizontal-rules/trackback/