How To Style HR Elements With Decorative Horizontal Rules

Book Review: Just Six Numbers by Martin Rees

A day in the life of God

How to style HR elements with decorative horizontal rules

Posted On Dec 04, 2008 at 8:50 pm

1490 Comments

There are many ways to make your online writings accessible and more pleasant to read: multi-tier headings, short paragraphs, justified text alignment, spacious line-height and clean gutter spacing. There is, however, one additional element that always seems to be forgotten when it comes to online publishing: The horizontal rule.

A horizontal rule is a simple decorative line that signifies the change of topic or tone between paragraphs and/or chapters. Like everything, they should not be overused or their benefits will be replaced by annoyance: Only use them between major breaks such as before a new section heading, or if you are making a dramatic change in tone/topic/scene/etc while still within the current section.

Horizontal rules do not have to be complex or even very eye-catching. In my opinion, the more subtle they are, the better. The style of rule I have decided to use on this site is simply a symmetrical lineup of semi-transparent circles that taper off on either side, as seen below this paragraph.

Cross-Platform Problem

The best way to make horizontal rules in html documents is to use the <hr/> element and style it with CSS by settings its background to an image with the decoration you want. This seems like it would be a pretty straight forward task, however Microsoft, as usual, has taken it upon itself to make this process more difficult. You see, Internet Explorer places a border around the HR element no matter what you do with the CSS. There are a few workarounds for this problem:

Simply hide the horizontal rules in IE.
Use DIV elements instead of HR.
Use javascript to wrap all HR elements with a DIV, then use CSS to style the DIV.

The best way to go is a combination of 1 and 3, let me explain why. When you write HTML, you want it to be as accessible as possible - such as being able to be viewed without any problems when stylesheets are turned off. The best practice is to use, whenever possible, HTML tags that have a specific purpose, such as P, STRONG, EM, CITE, HR, SUP and so fourth. If you were to use DIV elements instead of HR, then when your page is viewed with stylesheets turned off, there would be no horizontal rule at all - which in this particular case might not be a huge deal, but if your going to write with standards in mind, don't cut corners, man!

Here is my solution that offers both cross platform usability and graceful degradation:

Use only <hr/> tags in your HTML.
Use CSS to hide HR elements in Internet Explorer.
Use Javascript to wrap all HR elements within a DIV that has an hr class.
Use CSS to hide any HR elements located inside a DIV with hr class.
Use CSS to style both lone HR elements and DIV elements with hr class.

Now we can have decorative horizontal rules that will work in all modern browsers with and without stylesheets enabled; the only exception being Internet explorer with Javascript disabled AND stylesheets enabled - in which case the horizontal rule will simply not appear. Graceful degradation at its finest!

Below is the primary styling CSS. The bold parameters must be modified for your specific usage based on the size of the image you are using along with the desired margin above and below your rule. These parameters should be pretty straight-forward to edit.

.hr, hr {
  border: 0px;
  width: 188px;
  height: 6px;
  background: url("images/hr.png") top center no-repeat white;
  margin: 20px auto;
  text-align: center;
}

.hr hr { display: none !important; }

Hacks For Internet Explorer

Put the following code in the head of your HTML page. What this does is tell the browser, if it is IE, to load this additional CSS file.

<!--[if IE]>
  <link rel="stylesheet" media="screen" type="text/css" href="ie.css" />
<![endif]-->

Put the following code into your IE-only file.

hr { display: none !important; }

The next step is to setup the Javascript that will take care of the DOM object manipulation. For now I am going to include code that relies on the jQuery Javascript library. You will need to include the jQuery library on your site if you do not already use it - It's only 15kb and comes with a plethora of features! If you would like me to write a script that does not rely on a library for bandwidth efficiency reasons, post a comment; If there are enough people interested, I will write it up.

The best place to put this code is in a global.js file that is included globally on your site.

$(document).ready(function(){
  $("hr").wrap("<div class='hr'></div>");	
});

Here are a few examples of some decorative horizontal rules being sold at istockphoto.com.

Scott Klarr Jr