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;
border:0;
}

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.