title: Styled <hr> with border-radius appearing larger than defined height on non-FF browsers
body: <p>I am experiencing x-browser issues with the styling of a <code>&lt;hr&gt;</code> within a <code>&lt;span&gt;</code>. On FF the line is 2px high as expected and as declared in the CSS. However, when I look at it on Safari, Chrome or IE9 the line looks much thicker. Infact, when the <code>&lt;hr&gt;</code> is inspected with Safari's Firebug equivalent it sees it as <strong>4px</strong>.</p>
  
  <p>Is this an issue with the <code>border-radius</code> CSS attribute which is not apparent on Firefox? I want it to look like how I have built the markup and CSS and how it displays in Firefox, but i'm not sure what is wrong with the markup.</p>
  
  <p>This is how it looks on Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/Uwddv.png" alt="The HR on Firefox"></p>
  
  <p>This is how it looks on Safari (and IE9/Chrome):</p>
  
  <p><img src="https://i.stack.imgur.com/Q1fuy.png" alt="The HR on Safari"></p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;span id="course_divider"&gt;&lt;hr&gt;&lt;/span&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#course_divider {
      left: 0;
      padding-top: 40px;
      position: absolute;
      top: 27px;
      width: 25px;
  }
  
  #course_divider hr {
      background-color: #000000;
      border: 1px solid black;
      border-radius: 7px 7px 7px 7px;
      height: 2px;
  }
  </code></pre>