title: border-color: rgba() borders overlap at the corners giving a darker color than intended
body: <p>Using the following code:</p>
  
  <pre><code>element{
      width:300px;
      border:9px solid;
      border-color:rgb(0,0,0);
      border-color:rgba(0,0,0, 0.7);
  }
  </code></pre>
  
  <p>I end up with corners that are darker due to the overlay of the two borders... the only way I have found around this is to add a <code>border-radius</code> equal to the width of the border. Are there any other work arounds?</p>
  
  <p>I have only tested in chrome at the moment, I don't have my other browsers available right now.</p>