For each advanced CSS3 property, use this plugin in a CSS template to spew out all the supporting browser prefixes. Supports Gecko (Firefox, moz), Konqueror (khtml), Presto (Opera, o), Trident (MS Internet Explorer, ms), and Webkit (Safari, Chrome, webkit).

Forum thread

Refer to the Mozilla site for implementation ideas: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

For example:

#rounded_box {
  {exp:css3:borderRadius value="1em 2em 3em 4em"}
}

…outputs:

#rounded_box {
  border-radius:1em 2em 3em 4em;
  -moz-border-radius:1em 2em 3em 4em;
  -webkit-border-top-left-radius:1em;
  -webkit-border-top-right-radius:2em;
  -webkit-border-bottom-left-radius:3em;
  -webkit-border-bottom-right-radius:4em;
}

And for IE, try:

<!--[if IE 8]>
.shadow {
  {exp:css3:boxShadow ie="8" value="1px 2px 3px #666"}	
}
<![endif]-->

…which outputs:

<!--[if IE 8]>
.shadow {
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=1px,OffY=2px,Color='#666')";
}
<![endif]-->

{exp:css3:backgroundClip value="content"}
see https://developer.mozilla.org/en/CSS/-moz-background-clip

{exp:css3:backgroundLinearGradient value="top, #fff, #000"}
{exp:css3:backgroundLinearGradient value="left, rgba(0,10,20,.5), rgba(200,210,220,.5)"}
see https://developer.mozilla.org/en/CSS/-moz-linear-gradient
Note: this tag follows a very basic syntax: “top||left,color,color”. For more complex gradients, including radial, you’re on your own for now.

{exp:css3:backgroundOrigin value="content"}
see https://developer.mozilla.org/en/CSS/-moz-background-origin

{exp:css3:backgroundSize value="100% 100%"}
see https://developer.mozilla.org/en/CSS/-moz-background-size

{exp:css3:borderImage value="url(image.png) 1px 2px 3px 4px"}
see https://developer.mozilla.org/en/CSS/-moz-border-image
Note: Make sure you use 1 or 4 space-delimited values. Since cases where 2 or 3 values would make sense seemed so rare, I didn’t bother supporting those. Also, for horizontal/vertical radii, use the Mozilla slash style.

{exp:css3:borderRadius value="1em"}
{exp:css3:borderRadius value="1em 2em 3em 4em"}
{exp:css3:borderRadius value="1em/1px"}
{exp:css3:borderRadius value="1em 2em 3em 4em / 1px 2px 3px 4px"}
see https://developer.mozilla.org/en/CSS/-moz-border-radius

{exp:css3:boxShadow value="1px 2px 3px rgba(0,0,0,.5)"}
see https://developer.mozilla.org/en/CSS/-moz-box-shadow

{exp:css3:boxSizing value="border-box"}
see https://developer.mozilla.org/en/CSS/box-sizing

{exp:css3:transformRotate value="10deg"}
see https://developer.mozilla.org/en/CSS/-moz-transform

Add the ‘ie’ parameter with the values 6 (IE6, IE7) or 8 (IE8).

{exp:css3:backgroundLinearGradient ie="8" value="top, #fff, #000"}

{exp:css3:boxShadow ie="6" value="1px 2px 3px #666666"}

{exp:css3:opacity ie="6" value="0.5"}

{exp:css3:transformRotate ie="6" value="10deg"}

2.0.2 – 2010-03-18 — Added IE opacity.
2.0.1 – 2010-03-18 – Fixed background gradient.
2.0.0 – 2010-03-17 – Added IE support for background gradient, box-shadow, and rotation. Created EE2.0 version.
1.1.2 – 2010-03-11 – Applied PHPDoc style. Cleaned up docs. Deleted display_error.
1.1.1 – 2010-03-10 – Documentation cleanup.
1.1.0 – 2010-03-10 – Added transform:rotate();. Corrected border-radius syntax for W3C CSS3 candidate.
1.0.1 – 2010-03-05 – Documentation cleanup.
1.0.0 – 2010-03-05 – Initial release.