CSS gradient breaks rounded corners??

I have always used a repeating pattern to fill a div or container with a gradient background, so in an effort to move with the times I have tried to do the gradients using CSS. What I do not understand is that in one code Internet Explorer gives me rounded DIV's but not gradient. In the other instance I get a gradient in Internet Explorer but no rounded corners.

Now I have not changed the CLASS CSS, only the CSS applying to the DIV to generate the gradient, can ANYBODY tell me why in either case the gradient code is breaking the rounded corner CLASS?



When using this code to form the gradient backgrounds:

background-image: linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
background-image: -o-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
background-image: -moz-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
background-image: -webkit-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
background-image: -ms-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);

and this applied CLASS for rounded corners of the div's

.cborder { -moz-border-radius: 15px; border-radius: 15px; }


The results are: .... gradient BG .... Rounded Corners

Internet Explorer .... NO .... YES
Firefox .... YES .... YES
Safari .... YES .... YES

However, When using this code:


background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */


and same applied CLASS to div of:

.cborder { -moz-border-radius: 15px; border-radius: 15px; }


I get the following results:

The results are: gradient BG Rounded Corners

Internet Explorer YES NO
Firefox YES YES
Safari YES YES

filter: progid:DXImageTransform.Microsoft.gradient should be at the top of the list to ensure that ANY other supported option will take precedence

linear-gradient should be at the bottom of the list as it is the standard one and so should be used in preference to a proprietary option by browsers that support it.

Felgall,

Thanks I will try that. Is there a good resource that explains the proprietary order of CSS structure?


*** Update, Felgall, This had no effect on the end results, I have a good gradient in internet explorer but for some reason it ignores the rounded corners class. Any other ideas?