-moz-border-radious does not work on images in firefox ... why? (related to css3)

-moz-border-ra开发者_开发知识库dious does not work on image element (mean in html) in firefox ... why? (related to css3)

i test some way for solving that such as make a container for that image and changing the radious of container / not help !

thanks for attention

best regards

Firefox 3 treats foreground images as being in front of the border. This results in the effect that you're seeing. It doesn't affect any other browsers, including Firefox 4.

The issue is discussed at length in the topic linked as a duplicate in the comments above -- Firefox -moz-border-radius won't crop out image?

The best way around it is to use background images instead of foreground images where you want to have rounded corners:

ie: <div style='background:url(myimage.jpg);' /> instead of <img src='myimage.jpg'>

The down-side of this is that background images aren't quite as flexible as foreground images -- ie its harder to scale them, etc. But it does resolve the problem.

The other options are to give the image itself rounded corners, or simply to ignore it (since it only affects Firefox 3; depends on how many of your users would be affected, and how much if affects your design).