title: -webkit-border-radius looks ugly
body: <p>I'm styling a lightbox div with the following properties:</p>
  
  <pre><code>#lightbox {
    border: 0.3em solid #acaeb0;
    -webkit-border-radius: 1em;
    background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
    -webkit-box-shadow: 0 0 0.6em 0.3em #888;
  }
  </code></pre>
  
  <p>Problem is that the resulting rounded corners looks very ugly (using safari5):</p>
  
  <p><img src="https://i.stack.imgur.com/9gNdD.png" alt="enter image description here"></p>
  
  <p>Problem is the white space at the rounded corner.
  Do you know how I can avoid this behavior?</p>
  
  <p>EDIT:
  After adding the <code>-webkit-background-clip: padding-box;</code> property it looks better but not perfect:</p>
  
  <p><img src="https://i.stack.imgur.com/X0bPY.png" alt="enter image description here"></p>
  
  <p>I reduced the width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?</p>
  
  <p>EDIT2: 
  Seems to be a Bug of webkit: 
  <a href="https://bugs.webkit.org/show_bug.cgi?id=21819" rel="noreferrer">https://bugs.webkit.org/show_bug.cgi?id=21819</a></p>