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:

<hr />

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.

<style type="text/css">
#dothr
{
border-style:none; 
border-top: 2px dotted black;
border-bottom: 2px solid white;
height: 4px;
}
</style>

<hr id="dothr" />

The example below uses an embedded style code block to create a dashed line horizontal rule.

<style type="text/css">
#dashr
{
border-style:none;
border-top: 1px dashed black;
border-bottom: 1px dashed gray;
height: 2px;
}
</style>

<hr id="dashr" />

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed