Are you able to get it to work outside of SharePoint? When I face some of these odd challenges I like to copy out the elements' HTML/CSS into a separate HTML file and troubleshoot there first.
–
David LozziDec 1 '11 at 14:39

3 Answers
3

As already mentioned in another answer, Internet Explorer, up to and including version 8, does not provide support for any CSS3 based styling.

While Internet Explorer 9 comes with limited CSS3 support (like border-radius and box-shadow, but neither text-shadow nor background gradients) it would require to change your masterpage as mentioned in another answer.

However, changing your masterpage to include

<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9" />

could lead into other issues and is AFAIK not supported by Microsoft as of yet, hence I would stick with the default

<meta http-equiv="X-UA-Compatible" content="IE=8" />

unless you have found and ironed out all those quirks (which I haven't done yet either).

So, for IE 6-9 with the SharePoint 2010 default "X-UA-Compatible" setting, you could use the following CSS3 Pie code to make your rounded corners work:

If you, however, decided to switch your masterpage to IE=9 mode you could use SVG to create the background gradient because, as I mentioned above, the CSS3 styles for this feature are still missing from IE 9 and are part of IE 10+.

And just in case you want to add support for Internet Explorer 10+, there's some good news and some bad news ;-)

The good news, Internet Explorer 10+ does provide native support for the most-wanted CSS3 styles, including text-shadow and background gradients. The CSS3 for the IE 10+ background gradient looks like this:

The bad news, I do not believe Microsoft supports Internet Explorer 10+ with SharePoint 2010 using the masterpage switch

<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9;IE=10,IE=11" />

or even

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

hence the chance to use all the new CSS3 features of IE 10+ with SharePoint 2010 is pretty much out of luck to us and we have to resort to SharePoint 2013.

Last but not least let me mention that I personally prefer to not rely solely on JavaScript and CSS3 based solutions for pure Website design basically because you cannot be sure that each visitor is using the latest and greatest Webbrowser. So, as a good practice I always include an image-based fallback for background gradients and rounded corners for those Webbrowsers which either do not support CSS3 or have scripting turned off (yes, it happens quite a lot on public facing Websites).

So, for example, your background gradient would look like this with an image fallback: