Question

Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It’s containing element will work fine but I get ugly corners sticking out.

Any way to fix this without setting the image as a background image or processing it before I put it on my site?

Answer 1

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.