Best way to code curved shadowed boxes for cross-browser compatibility

I have boxes that have been designed like this

Basically I need to code them 开发者_C百科so that they can be any size height-wise and width-wise depending on the content inside. Plus the shadow effect needs to be transparent because the background color can change.

Best way to do this so it works in all browsers? (IE6+, FF, Opera, Safari, Chrome)

If you didn't have the requirement for IE6 you could use the very clean & light-weight jQuery Corners: http://jquery.malsup.com/corner/

To achieve this effect in IE6 you'll need to use the arcane method of a table lattice with tiny cells in each corner using semi-transparent corner images.

The best way is to design your website for modern browsers and allow things such as box shadow and border radius to degrade gracefully for older browsers and IE.

If you must have rounded corners in IE I'd use this method which I've found easy and lightweight...

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

I can't help with box shadows in IE, I'm afraid.

Actually, IE has a proprietary CSS extension that allows you to add shadows:

    .shadowed {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }

For rounded corners, you'll have to use images or JavaScript. I tried DD_Roundies and I'm quite satisfied with it (it has a few bugs though)

• DD_Roundies Website

As for other browsers, you can use this:

    /*************************************************/
    /* The properties follow this format:            */
    /* property-name: x-offset y-offset blur #color; */
    /*************************************************/

    box-shadow: 0 0 4px #000; /* For Opera */
    -moz-box-shadow: 0 0 4px #000; /* Firefox */
    -webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */

I would strongly recommend CSS3Pie (works in IE6-9).