Styling the HR (Horiztonal Rule) Tag

Making Interesting Looking Lines on Web Pages with HR Element

Horizontal rules - examples of lines
Horizontal rules - examples of lines.

If you need to add horizontal, separator-style lines to your websites, you have a few options. You could add actual image files of those lines to your page, but that would require your browser to actually retrieve and load those files, which would have a negative impact on site performance.

You could 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.

Finally, you can use the HTML element for the horizontal rule - the <hr>

The Horizontal Rule Element

If you’ve ever put an element on a web page, you likely discovered that the default way that these lines are displayed are not ideal. This means that you need to turn to 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%, 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.


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% and the default height is 2px.

In this example I changed the width to 50% 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):

<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, 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:

<hr 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 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 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):

<hr 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 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;"

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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 11/10/16