Horizontal Rules and How to Style Them

Oh, the <hr>. It’s one of those HTML tags that’s been around forever, but you never give much thought to. Until today.

<hr> stands for horizontal rule, and are a good choice when you have a lot of content on a single page. Using them can increase readability, by signifying to your reader that a new topic or section is about to begin- and visually, by giving the reader’s eyes a rest.

Yes, horizontal rules are a good thing, except that how they look relies mostly on the browser the website is being displayed in.

In the past, you could style <hr> tags with definitions such as align, size and width, but these are- thankfully- deprecated now, and so we turn to CSS.

Prettifying your <hr>s with CSS

First of all, you always want to close your <hr>s like so:

<hr />

There is no “open” tag, so think of this like a <br /> tag. It stands alone.

Here are some of the more common definitions you can use for styling:

  • height : to adjust the rule’s thickness.
  • width : the width of the rule. Use pixels or percentages.
  • background : set the color of the rule.
  • margin : to adjust the horizontal alignment of the rule.

For example, to get a rule like this:

add the following to your stylesheet:

hr {
height: 8px;
width: 500px;
background: teal;

The possibilities, of course, are many- you can use background images, borders (you’ll want to use border-top for this), and for clearing previous floats.

Learn more about the <hr> tag at the w3.

  1. By Kate Fosson posted on April 13, 2010 at 12:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for this post! I was just adding some hr’s yesterday and I was wondering the best way to do it. I didn’t realize that all of the definitions were deprecated!

  2. By Ryan Burnett posted on April 14, 2010 at 6:38 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks! I’ve seen this around, its alot like in looks, but I never knew where to use it until now!

  3. Trackback