Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

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

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


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