Firefox has supported rounded corners with CSS for a while. First with the vendor extension -moz-border-radius, and now with the specification border-radius. The problem is it doesn't work on images (<img> elements). This has been fixed in Gecko 2.0b7. Right now the current Firefox beta is using Gecko 2.0b6.
In a slightly less-than perfect world we could wrap out images in <div> tags and round the corners on those. Let's do that. (We'll be using jQuery by the way, because I love it.)
$('img').wrap('<div class="rounder" />');
Sadly, that doesn't seem to work in Firefox any better than rounding the images directly.
We know rounding background images works, so we need to get our inline images to become background images.
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
Let's toss all of that in a function.
function round_corners(){
$('img').wrap('<div class="rounder" />');
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
}
We can call that from wherever, and as an added bonus, we can make IE do it too*
So we have a work around, but once the browser supports it natively, we want to let that happen. Since we know when the support is being added, we can check the user agent string for the right version:
if($browser.mozilla && $.browser.version.match(/^(1|(2\.0b[0-6]))/)){
round_corners();
}
Bonus: we can use this to improve things in IE8 as well!
IE8 does not do border-radius, however you can make use of something useful like PIE to round corners. PIE is limited in the same way as Firefox in regard to rounding corners on <img> tags. So we can toss our handy function inside an IE conditional comment targetting versions older than IE9 (becuase IE9 does do rounded corners on <img> tags).
Update: The awesome people working on PIE have fixed this issue for an upcoming release. Now you should only need to use this javascript technique in Mozilla!
<!--[if lt IE 9]>
<script>
round_corners();
</script>
<![endif]-->
<script>
function round_corners(){
$('img').wrap('<div class="rounder" />');
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
}
if($browser.mozilla && $.browser.version.match(/^(1|(2\.0b[0-6]))/)){
round_corners();
}
</script>
<!--[if lt IE 9]>
<script>
round_corners();
</script>
<![endif]-->
All you need to do is make sure you replace 'img' with whatever selector you want to replace (unless you want to replace every single image). Also, make sure in your CSS you add the .rounder selector to any rules that would round the corners on an image.
If you replace an image which is being scaled down in the markup, or with CSS, it may display off center, or cut off, or otherwise not quite right as a background image.
See this in action on http://www.grace.edu/about.