Design Resources

The HR Tag

The HR (Horizontal Ruler) tag is a very helpful html element for dividing up sections of text in a page, without having to resort to one pixel high graphic. The problem is that left unstyled, your leaving it up to the browser to determine how it looks. Which can be indifferent at the best of times.

One way to control this is by using the available HTML attributes:

align: [ left, center and right ]
noshade: (solid line)
size: [ pixel value ] line height of the element
width: [ pixel or percentage value ] width of the element


<hr noshade size="1" width="90%" align="center">

Sadly not all browsers will interpret these attributes the same way, so the best way to get a consistent look is to use CSS.

What properties can you use?

width: [ pixel or percentage value ] specifies the width of the element
height: [ pixel value ] specifies the line height of the element
border: [ pixel value ] in this case it should be set to zero
color: [ hex value ] this describes the color of text within an element
background-color: [ hex value ] sets the background color for the current element
text-align: [ ]details how the element will be horizontally aligned.

You'll need to include both the color and background-color attributes in the style sheet as not all browsers will understand them. Browsers that understand both, will draw a border around the element so it is important to use the height attribute to control this.


hr {
border: 0;
color: #9E9E9E;
background-color: #9E9E9E;
height: 1px;
width: 100%;
text-align: left;

Specialists in designing and building websites

Print this Page
Copyright © 2003-2016 - 3internet Ltd. Innovation Centre, College Lane, Hatfield, Hertfordshire, AL10 9AB.
Registered Company No. 4652486, England & Wales. VAT Registered No. 811 7329 46.