problem when round the corner of the picture with css in firefox and IE

Question

I want to round the corner of my picture by using css in IE7,8 and Firefox. I have try to use -moz-border-radius for Firefox but it just round only border not the picture.

Link to picture: http://i108.photobucket.com/albums/n33/ligthing_illuminate/problemwithcorner.png

and the css which I use is following:

.content p img {
   float:left;
   margin:0;
   padding:0;
   width:780px; 
   border: 10px solid white;
   -moz-border-radius: 15px;
}

and in IE7,IE8 are not work with border-radius. Anyone can help me? Thanks you in advance.

Answer 1

IE 7或8不支持-mos-border-radius 。...您将需要还原为圆角图像或Nifty Corners以在IE 7或8中实现圆角

Answer 2

Your best bet is to make the image itself have rounded corners.

But this could be helpful too maybe: http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Answer 3

See the -moz part at the start of the -moz-border-radius CSS rule?

It means that this is a vendor specific extension (in this case for mozilla/firefox).

It is not supported on other browsers.