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. But with CSS designers have the means to create interesting horizontal rules.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Create Custom Horizontal Rules

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 RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268