Firefox -moz-border-radius won't crop out image?

Question

Workaround: Set the image as the background of a container element, then add border radius on that element.

Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.

--edit

OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.

I think to have the answer but sorry for my english... I resolved the question putting another div with border and no background color over the image.

#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}

Workaround: Set the image as the background of a container element, then add border radius on that element.

This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.

So I agree with Alex, that is if you make the image the size of the div/other elm.

I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.

So that looks like this:

<div id="container">
  <img src="images/fubar.jpg" alt="situation normal" />
  <div class="rounded lt"></div>
  <div class="rounded rt"></div>
  <div class="rounded lb"></div>
  <div class="rounded rb"></div>
</div>

Then the CSS:

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}

The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.

Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.