In FireFox the combination of -moz-border-radius with an image element is criminally broken. So I created a library for rendering them properly in FireFox using the Canvas element in conjunction with a clipping path.
Pretty pictures and code here:
http://github.com/ShiftSpace/rounded-image
The library is basically in alpha stage, I'm announcing it mostly to elicit help and get feedback on supporting other browsers (the latest versions of Safari have proper display of images with border-radius applied). For example I would like to support IE7/8 but my expertise there is limited. I have some placeholder code in place in hopes that integration with excanvas is pretty straightforward.
The library also supports the :hover pseudo-class.
You CSS file wil looks something like this:
.myimagea {
-moz-border-radius: 20px 0px 0px 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
border-radius: 20px 0px 0px 20px;
}
.myimagea:hover {
width: 320px;
height: 240px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
You're HTML file will have elements that look like this:
<img class="rounded-image myimagea" width="160" height="120" src="form.jpg"></img>
You then call RoundedImage.init().
Feedback on the API and code greatly appreciated.
David
