1. Technology

Style the HR Tag

Making Interesting Looking Lines on Web Pages


All of these lines were created with an HR element and CSS

All of these lines were created with an HR element and CSS

Screen shot by J Kyrnin
How the HR tag displays in various browsers

How the HR tag displays in various browsers. All of these were taken of an HR tag with only the width style adjusted.

Image courtesy J Kyrnin

If you’ve ever put an HR element in your web pages, you’ll know how ugly they are and so it’s important to style any HR tag you use. 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%, a height of 2px, and a 3D border in black to create the line.

Here is an example of a standard HR element or you can see in this image how an unstyled HR looks in modern browsers.

<hr />

It’s ugly.

It is possible to style the HR so that it looks nice, and actually fits with your page styles. But you have to be careful with it, as there are some browser issues with how it displays.

Width and Height are Consistent Across Browsers

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

In this example I changed the width to 50% of the parent element:

<hr style="width:50%;" />

And in this example I changed the height to 2em:

<hr style="height:2em;" />

Changing the Borders Can Be Challenging

In modern browsers (Chrome, Safari, Opera, Firefox, and IE8+) the browser builds the line by adjusting the border. So if you remove the border with the border 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:

<hr style="border: none;" />

However, in Internet Explorer 7 and lower, changing the border: none; property does nothing. The browser still displays the line as it normally would. So, in IE7 and lower, the above example will show three lines rather than just one.

But 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 I changed the border to be red, dashed, and 1px wide:

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

But if you change the border and the height, the styles look slightly different in IE7 from modern browsers. As you can see in this example, when you view it in IE7 there is a beveled inner line that does not display in the other browsers (including IE8 and up):

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

Changing the Color of the Line Can be Difficult Too

Internet Explorer 7 and lower treats the color of the line as a foreground color and so changes the color of the line when you change the color property. But modern browsers treat the color of the line as a background color and don’t change unless you use the background-color property. In this example I changed the color with the color property:

<hr style="color:#c00;" />

And in this example I changed the background-color property:

<hr style="background-color:#c00;" />

For best results you should change them both to the same color, so that the line appears correct in most browsers:

<hr style="color:#c00;background-color:#c00;" />

Of course, it still doesn’t work Opera 9 and lower because this browser needs a height defined and the border removed as well before it will change the color of the line:

<hr style="color:#c00;background-color:#c00;height:1px;border:none;" />

Adjust the Location of the Line

This seems like it would be a simple thing to do, just use the float property to push the line to the right or left:

<hr style="width:50%;float:right;" />

But as you can see it doesn’t work in Internet Explorer 7 and lower. To get it to work in these versions of IE, you need to remove the float style and put in the deprecated attribute align:

<hr style="width:50%;" align="right" />

Make a Decorative Line with a Background Image

Instead of a color, you can define a background image for your HR so that it looks exactly as you want it to, but still displays semantically in your markup. In this example I 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:

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

But as we’re coming to expect, there is a problem with one of the browsers—IE7 and lower surrounds the HR with a border. If you turn the border off it looks the same (in fact, the example above has the border turned off). And if you set the color to white (the same color as the background color), the line disappears in these older browsers.

The only solution is a hack. Surround the HR with a DIV, add the background image to the DIV, and then set the HR display to none: As you can see in this example, it works, but it makes your HTML less semantic. This is a situation where it might be better to let IE7 display the line incorrectly, or remove the image from IE7 and lower with conditional comments. Here is the code for this:

<div style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;">
<hr style="display: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. My 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 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. I wouldn't recommend using 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.

©2014 About.com. All rights reserved.