-webkit-border-radius looks ugly

Question

I'm styling a lightbox div with the following properties:

#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;
}

Problem is that the resulting rounded corners looks very ugly (using safari5):

Problem is the white space at the rounded corner. Do you know how I can avoid this behavior?

EDIT: After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:

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?

EDIT2: Seems to be a Bug of webkit: https://bugs.webkit.org/show_bug.cgi?id=21819

Answer 1

This is called "background bleeding".

For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.

As it says, you should try setting:

-webkit-background-clip: padding-box;