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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s