Journal

Styling HR

14 April 2006 › 22 comments

I did not ever stop to think that styling horizontal rules with CSS could pose much of a problem, until I saw this article over at the newly launched Bite Size Standards website, entitled Styling horizontal rules with CSS. While Nathan Pitman’s solution certainly is creative, it is pretty much unnecessary.

Now, I say this not to knock or make fun of his talent or proficiency as a web designer, but felt I should share a simple way to do it, that works in cross browser situations. Basically, he proposes wrapping all <hr /> elements in an extra <div> for the sake of styling, applying this CSS for the desired effect:

div.horRule {
  height: 1px;
  border-top: 1px solid #E5E5E5;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 10px;
  margin-right: 10px;
}

div.horRule hr {
  display: none;
}

I have always found that this simple bit of code does the trick just as well (actually, better):

hr
{
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 0 0;
  clear: both;
  margin: 0 0 20px;
  height: 0;
}

So, there you have it, a simple no-nonsense way to style a horizontal rule, without adding any additional markup. This has been tested and works in the latest builds of all the major browsers out there. So, go forth and have fun adding dividing lines all over the place (actually, use them sparingly).

Discussion + Dissension

1. #1 Ryan Heneise

   I’ve always come at with a sledgehammer approach – set every attribute possible, since you never know what the next weird browser will do. But I think that your four attributes pretty much cover it all. I agree though, I don’t like throwing unnecessary markup at something as simple as an hr.

   Anyway, forcing hr to be wrapped in a div tag will break the fabulous Textile, which is nice enough to translate ”———” into our beloved hr.

2. #2 Dennis Bullock

   Forgive my ignorance but I would use this to allow two or more elements to align horizontally?

3. #3 Justin Perkins

   I don’t know when I started forgetting the HR, but I did a long time ago. When did I bring it back? For naked day of course.

   The HR is just one more element to style, but wrapping in a div seems utterly meaningless to me. Then again, it does give you one more hook to style. So does wrapping every p with a div, but we like semantics don’t we?

4. #4 Dustin Diaz

   Nathan, surely you’ve seen this sitepoint example: http://www.sitepoint.com/examples/hr/

   This explains exactly why we need the extra div (and how quirky the hr is all by itself). The sitepoint example also shows you how to dynamically gather all the hr elements and wrap a div around them so you can keep your fun looking hr’s in the document without adding the div’s yourself.

   Best of both worlds :)

5. #5 Nathan Smith

   Dustin: I hadn’t seen that actually, not being a big Sitepoint fan because of their popup ads. However, that article looks to be a bit dated, since it’s from the days in which people actually cared about Internet Explorer on the Mac. I think that my example tests pretty well in browsers that are still supported.

6. #6 Yannick

   Dennis: The horizontal rule is used to separate two blocks of content with a line. So take for instance the comments section on this site. Between each comment there is a horizontal line that separates each comment. While I know Nathan didn’t use < hr /> to achieve this, one could do so on their own site if they saw fit.

   Nathan is showing how you can style this so it looks a little different from the default look < hr /> has.

   Hope that helps.

7. #7 Dennis Bullock

   Thanks Yannck! This is good information. But can anyone point me to a tutorial on arranging elements horizontally. Would this be a separate div for each?

8. #8 Natalie Jost

   Nathan I have to share a secret with you… I first started doing that with my hr’s after sneaking a peek at your code. :0) I never used hr before because it always looked horrible and i didn’t have time to figure that out, but browsing your css one day i noticed your hr rule. I had no idea you even used hr because they blend so nicely in your layout. You’re the king of simplicity, you know. :)

   Dennis You can float elements if that’s what you’re thinking. My column div works well. Use float:left and maybe a display:inline-block and give a width of about 45%.

   Ryan I agree with you on the textile comment. It always irks me when i have to use html instead of textile. I’ve noticed that bq. doesn’t always translate well so I’ve had to use the regular blockquote tag. Probably a different topic altogether, but do you know if it puts a p tag there with it? I’m guessing that could be my problem. I think with the bq tag it omits the p but if you use the html blockquote tag within the textile field it creates the p with it. Does that make any sense at all? :)

9. #9 Mark Priestap

   Using a DIV wrapper gives a lot of flexibility that a simple HR does not possess (for older browsers) and it assures consistent rendering.

   So why have the hr at all? For when CSS is turned off of course.

   Please correct me if I’m wrong.

10. #10 Nathan Pitman

    Nathan: Like your name. Snap!

    Perhaps I should have included a caveat in my bite to state that “this might not be the most holy use of a div” and “if you don’t give a monkeys about certain browsers don’t bother reading this”.

    I think though that on reflection the extraneous div is still a worthwhile addition if you’re working on a commercial website which has a wide browser target.

    Dustin: Thanks for pointing me in the direction of that SitePoint article.

    Mark: Indeed you are correct.

    :)

11. #11 Dustin Diaz

    @Nathan Smith,
    The Sitepoint article may have an old date, but indeed, browsers haven’t changed much since then. Look a the entire browser list. Even the differences between Firefox and IE6. You have to admit, a ‘div’ is much more robust than an ‘hr’. I mean really, there is no official spec on how an ‘hr’ is supposed to be styled, so it’s up to browser vendors to guess. I still think that SP article holds some truth to it.

12. #12 Dustin Diaz

    One final thing, when you get a popup from sitepoint, just click on “don’t show this to me again” – and you’ll be set with a cookie that ensures that you won’t get another one ;)

13. #13 Nathan Smith

    Okay, truce! I realize there are some benefits to be had by wrapping a div around a horizontal rule. I just thought I’d share my alternative method that works in the current versions of all good browsers. If for some reason you have to support Netscape 4 or IE5, I completely understand why you’d want the wrapped method. At least now both techniques are documented.

14. #14 kartooner

    Alternative methods are always welcome. :) I just treat HR’s like pennies; less important than everything else but they can contribute something in the long run.

    I find it extremely cool that two Nathans (a Pitman and a Smith) are being quite chatty about styling hr’s, when of course there are more important things going on in the world, like So NoTORIous.

15. #15 Nathan Smith

    Dude, you defaced my blog with a link about Tori Spelling? Bleh! Just when you think you know a guy, he drops the VH1 bomb and ruins the party.

16. #16 Nathan Logan

    As the third Nathan to appear here, I guess I’m the tie-breaker.

    So let’s see… I choose…

    Both! HA! SUCKERS!

    But really, thanks for the info. from both of you. “Nathan” REPRESENT (you don’t mind me riding your coat tails, do you?)!

17. #17 Nathan Pitman

    So I guess you’ve both seen nathan.com before then?

    :)

18. #18 Nathan Smith

    Nathan P: I’ve seen Nathan.com before, but not his list of “other Nathans.” That’s pretty hillarious and comprehensive at the same time. I saw that you are already on the list. I just emailed him to see if he will add me too.

19. #19 mynthon

    i think you have forgotten about: {border: 0px;}

20. #20 Nathan Smith

    Actually, that could just be {border: 0;}, because there’s no need for a measurement if there is no value. Meaning, 0px = 0em = 0pt = 0%, etc.

21. #21 Evan Scheingross

    Just want to note that I was testing out Nathan Smith’s method here, and it works fine in Firefox, IE (both 6 and 7 beta), Opera, and Safari. However, I can not check older browsers here at work.

    Are there any browsers out there where this direct styling of the hr element is known to fail?

    As Pitman said: “the extraneous div is still a worthwhile addition if you’re working on a commercial website which has a wide browser target.”

    If wrapping the hr in a div will ensure me of more success than styling the hr, then that is what I will do.

22. #22 Nathan Smith

    Evan: As far as I can tell, unless you want to cater to really old / retired browsers, you’re safe using my method. If you want to add backgrounds to your stuff, or otherwise have a wild and crazy looking HR, then you could wrap it in a div. If you’re going to do that though, you might as well just leave out the HR altogether, since you’re not styling the HR because it’s hidden.

Comments closed after 2 weeks.