Styling a Horizontal Rule with CSS

A quick and easy way to insert a dividing line into a website is with a horizontal rule, the hr tag.

This horizontal rule


was created by the following inline CSS:

<hr style="color: #f00; background: #f00; width: 75%; height: 5px;">

It could also be styled in your internal or external stylesheet (which is usually the better approach):

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}

Note that color AND background-color are applied. This is necessary, as some browsers use the background-color, others (IE) the color element to apply color to the rule.

Tags: ,

This post was written by:

This entry was posted on Sunday, June 20th, 2010 at 1:05 pm and is filed under CSS Basics, CSS Misc, Killer CSS Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.