How to decorate an <hr/> tag

Question

I want to have an horizontal ruler with the following characteristics:

align:left
noshade
size:2
width:50%
color:#000000

If the above attributes were not deprecated, I would use:

<hr size="2" width="50%" noshade style="color:#000000" align="left" />

I'm now thinking of using the style attribute only. Are there any tricks to make the HR render the same in several browsers?

---

EDIT:

From the answers, I remade my <hr /> tag to:

<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>

However, in Firefox, the text-align:left property seems to have no effect, as the horizontal rule appears centred. It works fine in Opera and IE, though. I experimented my code here:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

Any trick to make it left-aligned?

Answer 1

To answer your question:

"Any trick to make it left-aligned?"

I would just add 'display: inline-block;' to the style attribute in your previous code. Your completed code would look like this:

<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />

I tested this in Chrome, IE, and Firefox, and it worked in each. Further documentation and browser compatibility can be found here: CSS2 - The Display Declaration

On a side note, it would be best to add this style to an external or internal style sheet instead of adding it inline. This way, you can have a standardized hr element for your entire website, and it keeps your style declarations separate from your document layout.

Answer 2

In 2015, most browsers seem to render HR as a block element with zero height and 1px inset border. You can change the properties like this:

p { font: italic large serif; text-align: center; }

<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred; 
           margin-right: 50%;           ">

<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred; 
           margin-left: 50%;">

<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
           border-style: solid;
           border-color: palevioletred; 
           width: 50%;
           margin-left: auto;
           margin-right: auto;">