In some browsers, the COLOR="desired_color" attribute
is also supported. Is the opening sample horizontal rule in RED as you're viewing
this page? If so, then colored rules are supported for your browser.
THE WIDTH ATTRIBUTE (33b)
If you don't specify a width for a rule, then it goes across the entire available width: the code
A rule always creates a line break both above and below. Additional vertical
space can be added, if desired, by inserting <P> (paragraph) tags.
You can specify width in number of pixels. The code
<HR WIDTH="100"> produces a line that is 100 pixels wide:
Remember that 100 pixels will appear as different lengths to different viewers.
You can specify width as a percentage of the available width. For example, if
you always want a rule to take up half (50%) of the available width, use the code
<HR WIDTH="50%"> to produce:
THE SIZE and NOSHADE ATTRIBUTES (33c)
The height (thickness) of a rule is always measured in number of pixels, so you
can't guarantee that all your viewers will see the same height:
<HR> (no size specification) produces a very thin rule:
<HR SIZE="5"> produces a 5-pixel-high rule:
<HR SIZE="10"> produces a 10-pixel-high rule:
You can make the three-dimensional shading effect disappear, and instead display
a solid line, by using the optional NOSHADE attribute:
<HR SIZE="10" NOSHADE> produces a 10-pixel-high solid rule:
Of course, effects can be combined. It doesn't matter what order you list the attributes.
The code <HR SIZE="10" WIDTH="25%" NOSHADE> produces a 10-pixel-high
solid rule that takes up 25% of the available width:
THE ALIGN ATTRIBUTE (33d)
If you specify a rule that doesn't take up all the available width, then you can
specify how it is aligned.
If you don't specify an alignment, then it will be centered:
<HR WIDTH="50%"> produces a centered rule:
You can make the rule begin at the left (i.e., "left-justify" or "left-align"):
<HR WIDTH="50%" ALIGN="left"> produces:
You can make the rule flush with the right margin (i.e., "right-justify" or "right-align"):
<HR WIDTH="50%" ALIGN="right"> produces:
A final note: a common trick is to make the width and size the same value,
to get a little embossed (or solid) square. (The ones below are 10×10.)