title: CSS different border widths overlapping themselves
body: <p>I'm having trouble with borders overlapping themselves because of the different width the border-top has.</p>
  
  <p>Here is an example code of my problem:
  <a href="http://jsfiddle.net/u7KhX/" rel="nofollow">http://jsfiddle.net/u7KhX/</a></p>
  
  <pre><code>.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;
  </code></pre>
  
  <p>As you can see the purple part is not complete.</p>
  
  <p>Any Ideas?</p>