-webkit-border-radius выглядит некрасиво

Question

Я создаю div для лайтбокса со следующими свойствами:

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

Проблема в том, что получающиеся закругленные углы выглядят очень некрасиво (используя safari5):

Проблема в наличии пустого пространства в закругленном углу. Вы знаете, как я могу избежать этого поведения?

EDIT: После добавления свойства -webkit-background-clip: padding-box; оно выглядит лучше, но не идеально:

Я уменьшил ширину границы, но она выглядит так же с толстыми границами. Нужно ли устанавливать другое свойство, чтобы оно выглядело идеально?

EDIT2: Кажется, это ошибка WebKit: https://bugs.webkit.org/show_bug.cgi?id=21819

Answer 1

Это называется "фоновым кровотечением".

Для возможного исправления взгляните на этот сайт: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.

Как говорится, вы должны попробовать установить:

-webkit-background-clip: padding-box;

Answer 2

Единственный хак, который доставил мне удовольствие в подобном случае, заключался в том, чтобы обернуть коробку в другой: один с фоном, второй с границей, оба с тем же радиусом границы, но первый с прозрачной границей. И код выглядит так:

.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}<br/>
.second-block {border-radius:20px; border: 1px solid red;}

Answer 3

Я получаю эту проблему в Chrome при использовании границы в 1px, но при использовании 2px и выше выглядит нормально. Хром: 13.0.782.218 м