Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. 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.

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

    • Permalink to comment#

      Why bother?
      Just make a div, styled as:
      width:100% (or some pixel value)
      height:1px
      background-color:#777777

      You could give it a class like .hr or something.

      Messing around with HR tags is a waste of time to me, as with any standard that IE fails to adopt.

  3. The only issue I seem to have found with this, is that for most browsers I can make a repeat-x hr by changing the 3rd declaration to:

    background : url(hr.gif) 50% 0 repeat-x;

    However this will not work for IE < 8, instead a workaround could be creating a proper width image, which I have and used hr-ie.gif for older versions of IE via conditional commenting.

    Again we run into an issue where if one is using the same divider in the content area as the sidebar, one would have to create (in total) three images, one for most browsers, then two for IE if one were to use one in a sidebar (for instance) and one in content area.

    This is going a bit for for IE — this works really well so thanks for sharing. =)

  4. Shouldn’t the background position be 0 50%?

    I’m assuming your hr.gif has a certain width and you’re wanting to align it to the vertical middle of the hr?

    • Juane

      Unless the gif fits exactly to the div, which makes the div almost pointless.

  5. I prefer to use a PNG image over CSS. It is not a large file to load and it just gets repeated. You can make it look so much better, and create a more clearly sectioned Post. However, I can tell on your website you use CSS to section the White Content to the Grey backgrounds, and that is a simple and clear option.

  6. Rass Rass
    Permalink to comment#

    thanks to the commentator(John).. Really helps..
    Many thanks :))

  7. Permalink to comment#

    Good job ! Keep going :)

  8. Mario
    Permalink to comment#

    Hi everyone!
    Looking for a way to insert < hr > the indicated selketor.
    Do you have an idea how can I do this?

    p:after {
        content: <hr>;
    }
    

    Best Regards!

  9. Bhushan
    Permalink to comment#

    This is awesome,
    thanks a lot

  10. toplu mail

    I love using hr to divvy up the page! Glad that there is a decent post that looks at such a simple but useful tag.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".