Styling the HR (Horizontal Rule) Tag

Make interesting-looking lines on web pages with HR tags

Examples of lines
Horizontal rules - examples of lines.

Jennifer Kyrnin

To add horizontal, separator-style lines to your websites, one option includes adding image files of those lines to your page, but that would require your browser to retrieve and load those files, which could have a negative effect on site performance. You could also use the CSS border property to add borders that act as lines either at the top or at the bottom of an element, effectively creating your separator line.

Or—better yet—use the HTML element for the horizontal rule.

The Horizontal Rule Element

The default appearance of horizontal rule lines not ideal. To make them look nicer, add CSS to adjust the visual appearance of these elements to be in line with how you want your site to look.

A basic HR tag displays the way the browser wants to display it. Modern browsers typically display unstyled HR tags with a width of 100 percent, a height of 2 pixels, and a 3D border in black to create the line. 

Width and Height are Consistent Across Browsers

The only styles that are consistent across web browsers are the width and styles. These define how large the line will be. If you don’t define the width and height, the default width is 100 percent and the default height is 2 pixels.

In this example the width is 50 percent of the parent element (note these examples below all include inline styles. In a production setting, these styles would actually be written in an external style sheet for ease of management throughout all your pages):

style="width:50%;"> 

And in this example the height is 2em:

style="height:2em;"> 

Changing the Borders Can Be Challenging

In modern browsers, the browser builds the line by adjusting the border. So if you remove the border with the style property, the line will disappear on the page. As you can see (well, you won't see anything, as the lines will be invisible) in this example:

style="border: none;"> 

Adjusting the border size, color, and style make the line look different and has the same effect in all modern browsers. For example, in this demonstration the border is red, dashed, and 1px wide:

style="border: 1px dashed #000;"> 

Make a Decorative Line with a Background Image

Instead of a color, define a background image for your horizontal rule so that it looks exactly as you want it to, but still displays semantically in your markup. In this example we used an image that is of three wavy lines. By setting it as the background image with no repeat, it creates a break in the content that looks almost like you see in books:

style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;border:none;">

Transforming HR Elements

With CSS3, you can also make your lines more interesting. The HR element is traditionally a horizontal line, but with the CSS transform property, you can change how they look. A favorite transformation on the HR element is to change the rotation.

Rotate your HR element so that it's just slightly diagonal:

hr {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}

Or you can rotate it so that it's completely vertical:

hr {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

This technique rotates the HR based on its current location in the document, so you may need to adjust the positioning to get it where you want it. It isn't recommend to use this to add vertical lines to a design, but it is an interesting effect.

Another Way to Get Lines on Your Pages

One thing that some people do instead of using the HR element is to rely on borders of other elements. But sometimes an HR is a lot more convenient and easier to use than trying to set up borders. The box model issues of some browsers can make setting up a border even trickier.