-webkit-border-radius looks ugly

Question

I have a divbox style photo gallery 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; } 

The problem is that the resulting rounded corners look very ugly (using safari5):

The problem is the empty space in the rounded corner. Do you know how I can avoid this behavior?

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

I reduced the width of the frame, but it looks the same with thick borders. Should I set another property to make it look perfect?

EDIT2: This seems to be a web kit error: https://bugs.webkit.org/show_bug.cgi?id=21819

Answer 1

This is called "background bleeding."

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

As they say, you should try to install:

 -webkit-background-clip: padding-box; 

Answer 2

The only hack that gave me satisfaction in a similar case was to wrap the box in another: one with a background, the second with a border, with the same border radius, but with the first with a transparent frame. And the code is as follows:

  .fist-block {background: black;  border-radius: 20px;  border: 0px solid transparent;} 

 .second-block {border-radius: 20px;  border: 1px solid red;} 

Answer 3

I get this problem in Chrome when using 1px border, however using 2px and above looks fine. Chrome: 13.0.782.218 m