Styling HR

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