Seeing the recent spat of rounded corner articles (kalsey, meyerweb, mezzoblue), I decided to give it a shot.
Rather than adding rounded corners, my goal was to try to be able to dynamically knock off corners from an image. I was originally trying to experiment with -moz-border-radius, but unfortunately, while this property works on background colors, it doesn’t affect background image clipping. I suspect this is a bug; CSS3 border-radius behavior specifices that the property “causes the element’s background to be rounded,” so eventually this behavior needs to be implemented.
In any case, having been stymied by the easy way, I’ve proceeded to do it the old fashioned way way; writing a Javascript function that adds the four corner images dynamically:
This will look funny in IEPC because of its crap PNG support (I coulda used GIFs I suppose, but having real alpha makes the edges look nicer - I'll probably add a switch for IEPC people later); This probably could have been written in XBL/CSS, but I don't think there'd be much benefit.