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.
Nice ideas, but most look weird in IE (tried in IETab and IE 9).
Actually, for me using IE9, none of them look weird – they all look identical to what the post graphic shows.
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.
thanks for add twitter & facebook links! you rock!
These are great! Thanks!
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?
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.
Great Article! Thanks for posting!
I like when you post articles like this one
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.
Still can’t see anything but black in your content area. Only in firefox. Can only read comments, all else is black.
Honestly, I don’t feel comfortable using
<hr>tag T_TYes, IE is in outsiders with these styles
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.
Good observation.
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.
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…
Back to the ’90s
Nice and simple idea!
Good work.
Definitely I will use it in my next project !
Nice ideas. Thanks a lot again!
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.
Great examples. I like the first just for simplicity :)
Thanks Chris, these ones rule
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.
Horizontal rules make a website look more professional, and that is one HTML tag I often times forget about.
good resource.
That is some very cool hr going on, ta very much governor!
Good post. I actually styled <hr> elements with :after & :before in a recent project. For IE<9 compatibility, I recommend doing:
Then just write CSS selectors like
hr, .hrin your CSS. This might be considered a bit ugly, but hey—it works great!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.
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 :)
Hmmm… nice idea.
Here’s a few more.
I got one for you. The old school Rainbow HR.
Nice one, i like it.
Laser Touch Medical Clinic specializes in laser and light procedures, facial procedures, and non cosmetic procedures to help you look your best
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.
good stuff thank you
Excellent stuff, thanks for these. Will be used over and over I’m sure :)
Do you have any semantic solutions for a duo-tone hr?
I’ve been using
I don’t like adding the extra div, but sometimes I have to fall back to whatever works.
You should be able to use what you have above on the
hrelement. Just putborder: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.Woww!!! Redesign! Awesome!
:(o)
thanke you chris
Great stuff. Thank you!
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
Brilliant! Thanks Chris. Can’t wait to try a few of these out!!
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.
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!