title: Thick CSS borders not giving a clean rectangle
body: <p>This seems very simple, but surprisingly didn't find anybody facing this problem before. Take a look at this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/XVhW4/" rel="nofollow">http://jsfiddle.net/XVhW4/</a></p>
  
  <p>It has a thick 4px border like this:</p>
  
  <pre><code>&lt;div style="border: 1px solid #E3E3E3; border-top: 4px solid rgb(255, 153, 0);width: 300px; height: 250px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If you notice, the top thick border is not rendered in a clean rectangle. Its a trapezium with small taper from top to bottom. I checked that this occurs on both MAC OS X and Windows and also on Firefox, Chrome and IE. You can zoom it to about 4x observe this very clearly.</p>
  
  <p>Is this something I can fix? Why does this occur? </p>