How can I change the thickness of my <hr> tag

Question

I want to change the thickness of my horizontal rule (<hr>)in CSS. I know it can be done in HTML like so -

<hr size="10"> 

But I hear that this is deprecated as mentioned on MDN here. In CSS I tried using height:1px but it does not change the thickness. I want the <hr> line to be 0.5px thick.

I am using Firefox 3.6.11 on Ubuntu

Answer 1

For consistency remove any borders and use the height for the <hr> thickness. Adding a background color will style your <hr> with the height and color specified.

In your stylesheet:

hr {     border: none;     height: 1px;     /* Set the hr color */     color: #333; /* old IE */     background-color: #333; /* Modern Browsers */ } 

Or inline as you have it:

<hr style="height:1px;border:none;color:#333;background-color:#333;" /> 

Longer explanation here