As CSS3 is hitting the web hard, rounded stuff is poppin’ up all over the place. Rounded avatars/images are starting to become a reality. Trent Walton has a nice article on this here. It’s pretty simple, just apply a border radius to the
<img> itself, however Firefox and Opera don’t play well with the border-radius like other browsers do.
I want a solution for Firefox and Opera. As of now, I’ve not come up with a solution that is truly a mask (meaning it would work well on backgrounds of any color/pattern/texture, but this solution works for Opera, Firefox, Webkit and Chrome on solid color backgrounds.
<img src="/path/to/img.png" />
border:10em solid #1a1a1a;
The biggest con to this technique is that the rounding technique is just a color, not a mask, meaning this works well for solid backgrounds, but not patterned backgrounds :(
Play with it!
Wanna mess with the code? Go edit it live on JS Fiddle!