THE <hr> Tag

by Florence W Deems

NOTE: In XHTML, in which ALL tags must have either a separate closing tag or build in the closing, you must write the <hr> tag like this:

<hr />

but if you're using HTML, then you do not need that extra space followed by the />.

WIDTH - Modifies the width of the horizontal rule.
Written as pixels or percentage of page/table width.
Default is 100% of the page width.

ALIGN - Left or right placement on page, if width is less than 100% of page.
Default is center.

COLOR - Most browsers can see different colors. color="#ff9966" is what I have used on this page.
Or you can use color names, like "blue" as in the rule below.

SIZE - Controls the height of <hr> tags by using the size="number-of-pixels" attribute. On this page I have used size="6" in the colored <hr> tags. Size seems to also need the color attribute, or the hr line will look like just a plain line!

INVERTBORDER - This attribute was used ONLY by MSN-TV (Web-TV). Unfortunately, Microsoft discontinued MSN-TV in September, 2013.

NOSHADE - The hr line below is hardly visible when I use Google's Chrome browser. I see a gray line above a 5 pixel high "empty" or transparent line, with a barely visible gray line for the bottom border I haven't checked this to see how other browsers display this default hr.

Below is the same except the noshade attribute has been added.

So if you want a default gray hr with height (size) added, to show up, you must use the noshade attribute too.


The tag has a built in line break below it. For the one above, I wrote:

Two line break tags (<br>) before the <hr> tag and one after it.
Each browser treats the <hr> tag differently for vertical spacing.

Close "font" and/or "span class" tags before using a <hr> tag, then open a new "font" and/or "span class" tag after it.


WIDTH: 20%, 40%, 80%


Both rules are width=20%; one aligned left, the other aligned right, as below:

The one on the right is horizontally one line break below the first one, due to the built-in line break of this tag. Even trying to put them in a table cell will not make them line up evenly with each other. The second one written will ALWAYS be lower than the first one.

Some computer users have made colored horizontal rules or lines. Below are some that you can transload. Most of these lines look much better on dark backgrounds. You can add width and height to these images, also. Click on each image to get its url for transloading or downloading.

Visit these other Tutorials by Flo

Friday 28th of April 2017 03:47:06 PM

by Tone By Tone Dot Net


Tandem Tooters

Arbor Hosting