Adding CSS3 capability to IE ------- <=>

First - these divs are styled with curved corners, gradient fills, and box shadows using the new CSS3 styles. This is how they appear with newer browsers from Firefox, Safari, and Chrome.
(currently using Firefox 3.6)

CSS Code for this:

-webkit-border-radius: 30px 0px;
-moz-border-radius: 30px 0px;
border-radius: 30px 0px;

CSS Code for this:

background-image: -moz-radial-gradient(100% 100% 135deg, #66f, #f66);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66f), to(#f66));

-webkit-border-radius: 0px 0px 115px 115px;
-moz-border-radius: 0px 0px 115px 115px;
border-radius: 0px 0px 115px 115px;

-webkit-box-shadow: #ca2 0px 0px 4em;
-moz-box-shadow: #ca2 0px 0px 4em;
box-shadow: #ca2 0px 0px 4em;

CSS Code for this:

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

-webkit-box-shadow: #666 3px 5px 2em;
-moz-box-shadow: #666 3px 5px 2em;

box-shadow: #666 3px 5px 2em;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#aae), to(#eaa));
background: -moz-linear-gradient(#abe, #eba 70%);
background: linear-gradient(#abe, #eba 70%);

CSS Code for this:

background-image: -moz-radial-gradient(100% 100% 0deg, #3b3, #fe2);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3b3), to(#fe2));

-webkit-border-radius: 115px 115px 115px 115px;
-moz-border-radius: 115px 115px 115px 115px;
border-radius: 115px 115px 115px 115px;

-webkit-box-shadow: #727 10px 19px 1em;
-moz-box-shadow: #727 10px 19px 1em;
box-shadow: #727 10px 19px 1em;

See here for more information on CSS3 and check out our own Carlos Cordona's tutorials.

The PIE.htc javascript file adds support for:

* Rounded div corners.
* Gradient fills.
* Box shadows.
--- with IE6, IE7, and IE8.
The PIE.htc file is automatically called by the special references.
You can also use the pie.php header which then calls the pie.htc javascript file. Both files need to be on your server.

You can down load the files from here ( http://css3pie.com )

You will need to use the correct code for webkit and mozilla browsers, and the approved CSS3 code, plus the special call to the PIE.htc/PIE.php file to make things work with IE.

It will look like this:

-webkit-border-radius: 30px 0px; ----- for Safari etc.
-moz-border-radius: 30px 0px; ----- for Firefox
border-radius: 30px 0px; ----- standard CSS3 for latest browser versions

CODE FOR RADIUS/SHADOWS WITH IE:
behavior: url(PIE.htc);

GRADIENT BACKGROUND WITH IE:
-pie-background: linear-gradient( 115deg, #3b3, #fe2 70%);
This works with IE6, IE7, and IE8

(htc - "HTML Component file" is a format invented by Microsoft to add features to IE. In this case it consists of javscript code)

IE still cannot handle radial gradients but linear gradients work OK.
Current Webkit browsers (Safari, Chrome), can also only handle linear gradients.