Create Custom Horizontal Rules
By Stephen Bucaro
Horizontal rules can increase webpage readability by providing a separation between different
topics on a page. Horizontal rules are often used to separate a footer or resource box at the
bottom of a webpage from the main webpage content. HTML by itself creates some pretty bland
horizontal rules, that's why many designers have used graphic images as horizontal rules instead.
But with CSS (Cascading Style Sheets) designers now have the means to create interesting horizontal rules.
Here's your standard HTML horizontal rule:
The horizontal rule, <hr /> tag, is still valid in HTML 4.0, but all of its attributes,
like align, noshade, size, and width have been deprecated. Deprecated means
don't count on them to work in future versions of HTML. That's why it's important to learn how
to set the appearance of your horizontal rules with CSS. Two basic things you can set are the
Height and width as shown below.
<hr style="height:6px;" />
<hr style="width:75%;" />
In the example above, I set the width to 75 percent of the width of the horizontal rule's
conatining element (usually the webpage). The above examples use inline style code. The example
below uses an embedded style code block to create a dotted line horizontal rule.
border-top: 2px dotted black;
border-bottom: 2px solid white;
<hr id="dothr" />
The example below uses an embedded style code block to create a dashed line horizontal rule.
border-top: 1px dashed black;
border-bottom: 1px dashed gray;
<hr id="dashr" />