Back to Main Page

E-Mail Me! Click Here!

How to Draw a Horizontal Line

Contrary to what the title might suggest, you haven't stumbled upon an elementary school art class. Here I'll show you how to make the most basic of dividers for your page, a plain horizontal line.

The default line is a thin, gray line that stretches from margin to margin, like this:

The only tag needed to make this line is <hr>. The basic line can be enhanced by adding attributes. The first of these is "SIZE=#". This controls the thickness of the line, as shown:

Next comes "ALIGN="(left, right, or center). If the line runs all the way across a page, then this attribute has little visible effect. A line can be changed in length by adding the "WIDTH=#%" attribute. So by typing <hr size=10 align=right width=50%>. We get this:

By adding "noshade" the line will be filled:

This sort of line can also be of any color, just like text. To make this happen, enter the color="#xxxxxx" attribute inside the <hr> tag. This HTML: <hr color="#008080"> will give you a teal line:

Some versions of Netscape will put rounded ends on lines of this type. While this really doesn't affect anything, it might look sort of strange on a page with lots of squared off images and "sharp" edges.

It should also be noted that the "fancy" lines found on some pages are not generated by this command, but are graphic images.