<HR> tag CSS styling (cross-browser compliant)

Here’s the 3 sets of code I use when styling a HR (horizontal rule) in CSS. This is for a styled border (dotted), solid color and a background image. For the background image, I’ve never been able to get IE to work right. What HR code do you use for cross-browser compatibility?

Note: the problem with IE background images is the shaded border (left and top) that won’t go away.

HR border (dotted) – has to offset the background with the parent element’s BG color.
1
2
3
4
5
6
hr {
    border:1px dotted #F0F;
    border-style:none none dotted;
    color:#FFF;
    background:#FFF;
}


HR color (solid color)
1
2
3
4
5
6
hr {
    border:0;
    color:#F0F;
    background:#F0F;
    height:1px;
}


HR background image – IE is a bust when it comes to background images, so I have a fallback.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
hr {
    border:0;
    background:url(/images/line_hr.gif) repeat-x;
    height:10px;
}
</style>

<!--[if IE]>
<style>
hr {
    border:2px dotted #F0F;
    color:#F0F;
    background:#F0F;
    height:1px;
}
</style>
<![endif]-->

3 thoughts on “<HR> tag CSS styling (cross-browser compliant)

Leave a Reply

Your email address will not be published. Required fields are marked *

*


9 + 5 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>