CSS hr horizontal - dividing line

Heading Tags Info

When using CSS to create your custom <hr> dividing line there a a couple of things you have to remember, one is that Internet Explorer and Safari needs the background colour tag defined and the height set to 1px or higher, (Safari will show the line in 3D) in order to display it properly.
Here is a standard HR inline style without the background colour set:-

<hr style="height: 1px; color: #008000; width: 75% " />


If you are using IE and Safari, you will see that it looks like a light grey indent on the page, but in Firefox, Opera etc. it is a green line.

Now let us add the background colour.

<hr style="height: 1px; width: 75%; color: #008000; background-color:#008000 " />


Now you will see that the line is green in all browsers. NOTE you must view this page in different browsers to see the effect.

hr divider with a border

You can go a little further and add a coloured border to your <hr> display, this does mean that the actual inline hr style tag starts to get a little bigger, but you only have to master it once, after that it becomes more easy. Here is the html code that you will need, change the colour values to what suits you best.
It is recommended to use a minimum height setting of 4px for it to show up properly in Firefox.

<hr style="height: 4px; width: 75%; color: #FFFF80; background-color:#FFFF80; border-style:solid; border-width:1px; border-color:#000040 " />


Just place the above code wherever you want your dividing line.

By using the css style formatting for the HR line you will find that your page will pass the W3C Markup Validation Service for the XHTML 1.0 Transitional Doc-type.

HR Rule Global Settings

In the examples above I have used Inline CSS Styles, but you can set a global HR Rule, the difference being that with the global one you will only be able to have one line style per page. The main global setting would look like the example below and will have to be placed above your </head> tag, or, placed within your current style sheet if you are using one.

<style type="text/css">
hr {
color: #FFFF00;
background-color: #FFFF00;
height: 4px;
width: 75%;
border: 1px solid #FF0000;
}
</style>

If you do not want a border around your line, just leave out the border value.