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

If you need to add horizontal, separator-style lines to your websites, your typical options include 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 impact 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 is displayed 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 will 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;"> 

But if you change the border and the height, the styles look slightly different in very outdated browsers than they do in modern browsers. As you can see in this example, if you view it in IE7 and below (a browser which is woefully outdated and no longer supported by Microsoft) there is a beveled inner line that does not display in the other browsers (including IE8 and up):

style="height:1.5em;width:25em;border:1px solid #000;"> 

Those antiqued browsers are really not much of a concern in web design today, since they have been largely replaced with more modern options.

Make a Decorative Line with a Background Image

Instead of a color, you can 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.

You can 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);
}

Remember that 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 a way to get 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.