Как завести угол изображения в Chrome (и других браузерах webkit)?

Question

В Firefox, если я помещаю изображение в элемент, а затем использую border-radius, Firefox обрезает изображение, и оно выглядит великолепно! Так же работает в IE9 (удивительно!). В Chrome (или любом браузере webkit) граница округляется, но изображение не обрезается и выглядит ужасно. Что я делаю не так?

border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;

Answer 1

Поместите это в div? И стиль их отдельно.

http://jsfiddle.net/Stijntjhe/bFECN/1/

Answer 2

Я не верю, что спецификация хорошо определена в этом сценарии, отсюда два разных результата.

Если у вас нет заполнения, WebKit будет обрезать изображение на основе радиуса границы. Смотри: http://jsfiddle.net/bFECN/5/

Однако в спецификации нет ничего, что говорило бы, что отступы также должны быть частью чертежа радиуса.

Answer 3

Этот вопрос был опубликован более года назад, и у webkit такая же проблема с поддержкой радиуса границы с изображениями. Так что я решаю это с помощью небольшого трюка, вместо использования границ CSS, я меняю метод, используя двойную тень тени. В твоем случае должно быть что-то вроде этого.

-webkit-box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
-moz-box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;

border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;