What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Cross-Browser hr Styling

Cross-Browser hr Styling

For regular browsers

hr {
       border : 0;
       height : 15px;
       background : url(hr.gif) 50% 0 no-repeat;
       margin : 1em 0;
       }

For IE < 8 (use conditional stylesheets)

hr {
       display : list-item;
       list-style : url(hr.gif) inside;
       filter : alpha(opacity=0);
       width : 0;
       }

Reference URL

Subscribe to The Thread

  1. Brad Czerniak

    Here’s a way to get cross-browser hr tags with some progressive-enhancement niceties. Note the use of page-break-after for printing purposes, as well as the line-height and margin to position the :after content (which are section symbols).
    you set both the color and background-color since different browsers render hrs differently. The goal here is to make the line look like a line of the color you intended, not necessarily to make it look exactly the same in all browsers.

    hr {
background-color:#444;
border-width:0;
color:#444;
height:2px;
line-height:0;
margin:-.5em 10px 1.8571em 10px;
page-break-after:always;
text-align:center;
width:80%;
}

hr:after {
content:"\a7\a7";
font-size:1.25em;
}

    This and other neat CSS snippets can be found at Hawidu CSS.

    Reply ↓
  2. Pablinho

    Pretty neat, i always have trouble styling them cross browser… i will give this code a try !!

    Reply ↓
  3. frank

    new styles: http://css-tricks.com/15135-simple-styles-for-horizontal-rules/ ;)

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~