title: Force border-top to overlap border-left/border-right
body: <p>Here is the fiddle: <a href="http://jsfiddle.net/3Ys2d/" rel="nofollow">http://jsfiddle.net/3Ys2d/</a></p>
  
  <p>CSS</p>
  
  <pre><code>div{
      border: solid 3px blue;
      border-left-color: red;
      border-right-color: red;
      width: 100px;
      height: 50px;
  }
  </code></pre>
  
  <p>I need to have the top border overlap the left and right borders completely at the intersection. At the moment they are on an angle showing part of both and the intersection. </p>
  
  <p>Is there a way to do this?</p>