Почему радиус CSS3 не работает на изображениях в браузерах webkit (Chrome и Safari)?

Question

Это работает в Firefox 4 и ie9, но не в Chrome или Safari. Это также не работает в опере, но кого это волнует. Так как заставить его работать?

img { width: 100px; height: 100px; border: 3px solid #fff; 

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

}

Answer 1

Обходной путь должен использовать div и установить фон div для изображения.

.rounded { 
    width: 100px;
    height: 100px; 
    border: 3px solid #fff; 

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

    background: url(image.png) no-repeat;
}

Answer 2

вы используете белый в качестве границы. какого цвета твой фон? Я не вижу проблем на моем jsfiddle http://jsfiddle.net/m5NP3/