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. User Avatar
    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 {
    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.

    • User Avatar
      shennawy
      Permalink to comment#

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

  2. User Avatar
    Pablinho

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

    • User Avatar
      John
      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.

    • User Avatar
      Robert
      Permalink to comment#

      John,

      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.

    • User Avatar
      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;
      border-top-color:red;
      border-bottom-color:whitesmoke;
      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!

    • User Avatar
      Luis
      Permalink to comment#

      I figured it out! I just used two classes to differentiate between the wide and narrow hr’s.

      hr.one { display: block;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          margin-left: 400px;
          margin-right: 400px;
          border-style: inset;
          border-width: 1px; 
          border-top-color:red;
          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-top-color:navy;
          border-bottom-color:whitesmoke; }
      
  3. User Avatar
    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. User Avatar
    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?

    • User Avatar
      Juane

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

  5. User Avatar
    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. User Avatar
    Rass Rass
    Permalink to comment#

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

  7. User Avatar
    Bold
    Permalink to comment#

    Good job ! Keep going :)

  8. User Avatar
    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. User Avatar
    Bhushan
    Permalink to comment#

    This is awesome,
    thanks a lot

  10. User Avatar
    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.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag