Why won't CSS3 border radius work on images on webkit browsers (Chrome and Safari)?

This works in firefox 4 and ie9 but not chrome or safari. It also doesn't work in opera but who cares about that. So how to get it to work?

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

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
bor开发者_开发问答der-radius: 10px; 

}

A workaround is to use a div and set the background of the div to the image.

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

you are using white as your border. what color is your background? I'm not seeing any issues on my jsfiddle http://jsfiddle.net/m5NP3/