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" />

RSS Feed

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

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.