title: How to decorate an <hr/> tag
body: <p>I want to have an horizontal ruler with the following characteristics:</p>
  
  <pre><code>align:left
  noshade
  size:2
  width:50%
  color:#000000
  </code></pre>
  
  <p>If the above attributes were not deprecated, I would use:</p>
  
  <pre><code>&lt;hr size="2" width="50%" noshade style="color:#000000" align="left" /&gt;
  </code></pre>
  
  <p>I'm now thinking of using the style attribute only. Are there any tricks to make the HR render the same in several browsers?</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>From the answers, I remade my <code>&lt;hr /&gt;</code> tag to:</p>
  
  <pre><code>&lt;hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/&gt;
  </code></pre>
  
  <p>However, in Firefox, the <strong>text-align:left</strong> 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:</p>
  
  <p><a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test" rel="noreferrer">http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test</a></p>
  
  <p>Any trick to make it left-aligned?</p>