Cross-browser CSS for radial gradient and rotate+radius

Question

Thanks to tools like CSS3 Pie and CSS3Please, I have been able to create cross-browser CSS.

But I am still stuck in two areas (because of Internet Explorer of course):

radial gradient
combine rotation and rounded corners

Any pointers to how to address these issues would be appreciated.

My objective is to create a CSS cross-browser pie chart.

did you look on this example :http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/ — Haim Evgi, Nov 08 '10 at 06:59
Yes, that one too: http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/css3-designs/css3-charts/index.html My issue is to get this to work in Internet Explorer. — Christophe, Nov 08 '10 at 08:03
Use [this](http://jquery.malsup.com/corner/) jQuery plugin for the border-radius and use [this](http://7synth.com/dev/bin/gradient.js) plugin for the gradients in ie. — noob, Jan 17 '12 at 14:02

score 1 · Answer 1 · answered Feb 22 '11 at 20:07

1

For IE, you’ll have to use

filter: progid:DXImageTransform.Microsoft.Gradient()

See the MSDN documentation here.

answered Feb 22 '11 at 20:07

mcritz

709
7
14

score 0 · Answer 2 · edited May 23 '17 at 12:21

For radial gradient checkout: Create a radial gradient for Internet Explorer 6/7/8

and for rounded corners simply put these to your css sheet:

.someclass {
    /* here you put your PIE.htc file's adress */ 
    behavior:url(/Content/PIE.htc); 
    /* and wish, it behaves like a pie! */
    border-radius:22px 22px 14px 14px;
    /* also you can do smt like */
    /* border-radius:14px 22px 30px 36px; */
    /* or smt more sexy like */ 
    /* border-radius:32px 10px 32px 10px/32px 10px 32px 10px; */
}

you can appoint different radius to each corner and it works for all browsers.

and for piechart check this out: http://raphaeljs.com/pie.html

Cross-browser CSS for radial gradient and rotate+radius

2 Answers2