border-radius on img?

[lastlifelost]

.imgWrapper img {	vertical-align:middle;	margin: 0 auto;		height: 95%;	width: 95%;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}

This code works just fine in all supporting browsers except Opera. Live site: sosimagesonline.com. i'm trying to get the corners of the wrapped image, in this case the star, to be rounded in the same way the div is. It works fine in Chrome, Safari and Firefox, but I can't get the border-radius trait to apply to the IMG in Opera. The div rounds out just fine. Suggestions?

[Dilated]

This code works just fine in all supporting browsers except Opera. Live site: sosimagesonline.com. i'm trying to get the corners of the wrapped image, in this case the star, to be rounded in the same way the div is. It works fine in Chrome, Safari and Firefox, but I can't get the border-radius trait to apply to the IMG in Opera. The div rounds out just fine. Suggestions?

Keep in mind, images are embedded content just like videos or flash objects, and as such they don't play by the same rules as regular elements and a lot of times they might be treated differently in different browsers. I'm not surprised Opera acts that way with images.One thing you could do is give the wrapper div the border radius and then set its overflow to hidden:

.imgWrapper {	overflow: hidden;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}

That will hide the corners of the image that poke out.