пограничный радиус в Chrome ошибка?

Question

У меня проблема с границей радиуса в Chrome это мой код:

img{
border-radius: 24px;
border: 2px solid #c7c7c7;                 
-moz-border-radius:24px; 
-webkit-border-radius: 24px;
}

На моззиле работает нормально, а на хром выглядит смешно ... На mozzila я вижу круг, граничащий с моим изображением, но на chrome круг обрезает границы, и все, что я могу видеть, это прямая линия

скриншот: http://postimage.org/image/27turq0mc/

Вы можете помочь?

Answer 1

это, вероятно, ошибка Chrome. Решение может заключаться в том, чтобы обернуть img div и сделать следующее css:

img{                
    -moz-border-radius:24px; 
    -webkit-border-radius: 24px;
    border-radius: 24px;
    display:block;
}
div {
    border: 2px solid #c7c7c7; 
    border-radius: 24px;
    -webkit-border-radius: 24px;
    width:40px; /* the width of image */
    height:40px; /* the height of image */
}

Демо: http://jsfiddle.net/EnmMp/1/

Answer 2

У меня была та же проблема и решение, предоставленное:

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

исправил проблему.

Сначала оно показывает решение с использованием только CSS3 и HTML, а затем оно представляет решение с использованием JQuery.

Answer 3

вместо только приведенного ниже кода для границы

-moz-border-radius: 2px 2px 15px 15px;

Чтобы радиус был применен по часовой стрелке, начиная с верхнего левого угла, вы не можете сделать это для Webkit в данный момент. Таким образом, вы должны написать это длинной рукой, как:

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

Answer 4

Попробуйте сделать это на фоновом изображении, а не на элементе html img, так как некоторые элементы img не работают с радиусом границы (пока я не угадал).

div.something{
background-image:url(something.png);
border-radius: 24px;
border: 2px solid #c7c7c7;
border-radius: 24px;
}