Grow your CSS skills. Land your dream job.

Simple Styles for Horizontal Rules

Published by Chris Coyier

That is, the <hr> element. With the help of a few contributors, I put together this page of very simple styles for them. You could get a lot fancier with an element like a <div> that can hold content, but I like the semantics of a horizontal rule. It's an emphatic break between two sections of content.

Note that in some of these examples, generated content is used (:before/:after). This isn't supposed to work, as far as I know, because <hr>s are no-content style elements (they have no closing tag). But as you can see, it does. If you are concerned about uber-long-term design fidelity, stay away from those.

Comments

  1. Permalink to comment#

    Nice ideas, but most look weird in IE (tried in IETab and IE 9).

    • dj
      Permalink to comment#

      Actually, for me using IE9, none of them look weird – they all look identical to what the post graphic shows.

    • dj
      Permalink to comment#

      Oops… let me amend that – a sloppy tab click had me confused. Most of them look ok under the “fallback” condition. My guess is that IE10′s expansion of transitions will lock in on the rest.

    • Ayeh
      Permalink to comment#

      Thanks for this! Very useful, adds style to my project.

    • ibanez0r
      Permalink to comment#

      Why on gods green earth, given free choice, would u choose IE? and would anyone care if an IE user misses out on some css styling lol :D pro tip: thats not all ther missing out on!

  2. matias
    Permalink to comment#

    thanks for add twitter & facebook links! you rock!

  3. Permalink to comment#

    These are great! Thanks!

  4. I never fully understood the <hr>’s place in the modern web. It divides two sections of content, as you say; but shouldn’t the html define those two sections as elements rather than defining the “space” between them?

    • Permalink to comment#

      Section *elements* don’t need a special element to separate them.

      To be more clear, the use for horizontal ruler is not about the section *element*, it’s about different *sections of content*, like between paragraphs with entirely different topics.

    • Violet Weed
      Permalink to comment#

      As a longtime graphic slash sgml template designer and after years of work on madison ave creating ads and typefaces too, eruditely, the hr still has a place in web design, and not just to define two sections as elements. It can also define the ‘rest’ between two elements in a similar fashion to a semi-colon or em/en dash in text…. it can be consider a rhythmic ‘element’ if you can ‘hear’ that. Design is really made up of white / gray / black areas. The thing that bothers me is the current fashion to make text on a webpage ‘shades’ of dark-gray rather than BLACK. Personally readability is best with yellow text on a blue background, but since it is now possible to have millions of colors, that’s my ‘old fuddy duddy’ side speaking. ;) BUT for these 66 year old eyes, I say STOP WITH THE STUPID GRAY TEXT!!!!! sigh. It’s bad enough having to read 6 point type but when it is grayed rather than black, I think I need new glasses. aargh. (Did I mention that my age ppl r prone to digress?)

  5. Travis
    Permalink to comment#

    Great Article! Thanks for posting!

    I like when you post articles like this one

  6. Permalink to comment#

    The part I’m most fascinated with is the part where pseudo-elements makes it possible to insert content inside void elements like the horizontal ruler.

    This opens a few doors and raises a lot of questions.

  7. Arlene
    Permalink to comment#

    Still can’t see anything but black in your content area. Only in firefox. Can only read comments, all else is black.

  8. Permalink to comment#

    Honestly, I don’t feel comfortable using <hr> tag T_T

  9. Legion
    Permalink to comment#

    Yes, IE is in outsiders with these styles

  10. Permalink to comment#

    Pseudo-element examples do not work in Opera (and here Opera shows itself as following standards best), also hr.style-five is absolutely invisible due to height: 0.

  11. Permalink to comment#

    Thanks.
    These are neat. I plan on incorporating a couple in a design I’m working on now.
    As for IE and Opera … who bloody cares!
    Who runs opera anyway? Except for web devs browser checking.

    • None
      Permalink to comment#

      Wow, really? I didn’t know the “who runs X anyway?” logic had made it out of 2002. Nice.

      You might want to google “future proof” and see if you can’t learn a thing or two about web development…

  12. Sushil Mayengbam
    Permalink to comment#

    Nice and simple idea!

  13. Permalink to comment#

    Good work.

    Definitely I will use it in my next project !

  14. Nice ideas. Thanks a lot again!

  15. Permalink to comment#

    At first sight I was like “why are they putting normal in here (the first line)”, then I saw th variety of color change i the line, pretty neat.

  16. Permalink to comment#

    Great examples. I like the first just for simplicity :)

  17. Permalink to comment#

    Thanks Chris, these ones rule

  18. Wolf
    Permalink to comment#

    I’ve tweaked the css of style two to fade the line out from white instead of black but am getting no line at all in IE (example).

    Any suggestions gratefully received.

  19. Permalink to comment#

    Horizontal rules make a website look more professional, and that is one HTML tag I often times forget about.

    good resource.

  20. That is some very cool hr going on, ta very much governor!

  21. Fredrik Ekelund
    Permalink to comment#

    Good post. I actually styled <hr> elements with :after & :before in a recent project. For IE<9 compatibility, I recommend doing:

    <!--[if lt IE 9]> <div class="hr"> </div> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <hr class="hr" /> <!--
    

    Then just write CSS selectors like hr, .hr in your CSS. This might be considered a bit ugly, but hey—it works great!

    • Permalink to comment#

      A more robust solution would probably be to use Paul Irish/HTML5 Boilerplate’s conditional HTML classes. (https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L3) That way, you could apply a different style to horizontal rules without extraneous conditional tags around the element itself, and you can use a hr instead of a div.

    • Fredrik Ekelund
      Permalink to comment#

      Yeah, that is a much more maintainable solution if pseudo element styles aren’t key. But I was just throwing my tip out there as a workaround for the problem with IE<9 not applying :after & :before styling to <hr>’s :)

    • Hompimpa
      Permalink to comment#

      Hmmm… nice idea.

  22. Permalink to comment#

    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.

  23. good stuff thank you

  24. Permalink to comment#

    Excellent stuff, thanks for these. Will be used over and over I’m sure :)

  25. Anna Funk
    Permalink to comment#

    Do you have any semantic solutions for a duo-tone hr?

    I’ve been using

    
    <div class="hr"><hr /></div>
    
    <style>
    div.hr {border-top: 1px #fff solid; border-bottom:1px #000 solid;}
    div.hr hr {display:none;}
    &lt/style>
    

    I don’t like adding the extra div, but sometimes I have to fall back to whatever works.

    • cnwtx
      Permalink to comment#

      You should be able to use what you have above on the hr element. Just put border:none; right before the code you have above. This should allow you to get a two color hr without the div. If you add a little extra height to it, you can specify a background color, and make a three color line.

  26. Hompimpa
    Permalink to comment#

    Woww!!! Redesign! Awesome!

    :(o)

  27. Permalink to comment#

    thanke you chris

  28. Gary Derbridge photographer
    Permalink to comment#

    Great stuff. Thank you!

  29. Sasha
    Permalink to comment#

    I’m having a strange problem with style 8 (specifically content=”§” – even when used outside of the rest of the styling). It seems that when rendering with Firefox, the content=”§” renders with an  in front of it. Why is this happening?

    Any help would be appreciated

  30. Eric @ Pixelheap
    Permalink to comment#

    Brilliant! Thanks Chris. Can’t wait to try a few of these out!!

  31. Permalink to comment#

    I’d love to see a mix between #2′s gradient and #4′s shadow… but I know these two just don’t mix. Perhaps with the right javascript you could make an opacity fade, but that breaks the “cleanliness”. An added bonus would be to change the shadow size as it got closer to the middle, creating a cut-in-the-page-and-pulled-open look.

  32. Permalink to comment#

    Looks awesome to humans but for the W3C CSS Validator, it says errors for the hr.style-two: Value Error :\
    I’m using CSS 2.1 – do I need to change it to CSS 3? If so, how? Please help!

  33. Sofia
    Permalink to comment#

    Really cool! Thanks :)

  34. Violet Weed
    Permalink to comment#

    P.S. Did I ever mention that I love your site? I use it for all my ‘how the heck can I do that’ questions. I still can’t stop myself from using html/css as though it were sgml/gml but hey so what. Your knowledge is vastly superior to mine when it comes to web tagging, and I trust what you say as ‘truth’. That’s what really makes your site great. If YOU said it, I don’t doublecheck on sourceforge/w3c/etc. You are ‘the’ expert. :) (But if you happen to be one of those people who believe that html5 is ‘no longer’ based on sgml, I’d have to demote you 10 points.) Well, that’s a lot of words for me and my nurse is now going force me to go to bed. sigh. Darn these retirement centers!

  35. Beenish Bhatti
    Permalink to comment#

    thanks for helping………. it works well

Leave a Comment

Current day month ye@r *

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