How to Styling a Horizontal Rule with CSS

Mar 12, 2012, by admin

A fast and simple 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: #02481E; background: #02481E; width: 75%; height: 5px;”>

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

hr {

color: #02481E;

background: #02481E;

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.