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


  1. Brad Czerniak
    Permalink to comment#

    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 {
    margin:-.5em 10px 1.8571em 10px;
    hr:after {

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

    • shennawy
      Permalink to comment#

      Thank You I was Looking For a Solution Of a Problem And I founded It In Your Comment (Y)

  2. Pablinho

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

    • John
      Permalink to comment#

      Why bother?
      Just make a div, styled as:
      width:100% (or some pixel value)

      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.

    • Robert
      Permalink to comment#


      While your div as hr solution works fine for web devs and designers, it does not work for the average marcom who adds content. This is who most of us are designing content pages for. You’ll be lucky to get them to click the hr button in the editor (if there is one) let alone to write a div.

    • Luis
      Permalink to comment#

      I am looking for a way to vary the size of the hr’s in my website. For example, I would like to have a wide hr after the title, and a thinner version below my navigation links, then back to wide at the bottom of each page. Here is what I have tried, this is the wide version.

      hr { display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: 300px;
      margin-right: 300px;
      border-style: inset;
      border-width: 1px;
      align:center; }

      Then in the body of the page when I want the thinner version I tried this:
      <hr width="15%" align="center">
      This works to make the thinner hr but it aligns it to the left and I want it centered. Nothing I do works. Is there any actual way to do this? I appreciate the feedback!

    • Luis
      Permalink to comment#

      I figured it out! I just used two classes to differentiate between the wide and narrow hr’s. { display: block;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          margin-left: 400px;
          margin-right: 400px;
          border-style: inset;
          border-width: 1px; 
          border-bottom-color:whitesmoke; } 
        hr.two { display: block;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          margin-left: 700px;
          margin-right: 700px;
          border-style: inset;
          border-width: 1px; 
          border-bottom-color:whitesmoke; }
  3. Frank Stallone
    Permalink to comment#

    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. Gary Swanepoel

    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. Richard Poulin
    Permalink to comment#

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

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.