IE Gradient and border Radius issue - css

Question

I am creating a button with both border radius and gradient.
If you check in IE browser on the right side a background color is taking.
I am trying to resolve this issue but I am unable to do it.
All the browsers are working fine, only IE is facing this issue
Here is the demo: Link
HTML:
<span aria-disabled="false" id="__button2-0" class="sapUiSegmentedButton" role="radiogroup" tabIndex="0" data-sap-ui="__button2-0">
<button aria-haspopup="true" aria-disabled="false" id="__button3-0" class="sapCPDownloadBtn sapCPCartBtn sapUiBtn sapUiBtnNoGradient sapUiBtnNorm sapUiBtnS sapUiBtnStd sapUiMenuButton" role="button" tabIndex="-1" type="button" data-sap-ui="__button3-0">
<span class="sapUiBtnTxt">Download</span>
<span class="sapUiMenuButtonIco"></span>
</button>
</span>​
CSS:
.sapCPCartBtn {
width: 205px;
/* fallback */
padding: 10px;
text-align: center;
height: 32px;
box-shadow: none;
color: #FFFFFF !important;
font-weight: bold;
font-size: 1em !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
-khtml-border-radius: 10px !important;
-goog-ms-border-radius: 10px!important;
margin-top: 5px;
text-align: center;
display: inline-block;
cursor: pointer !important;
border: 0px!important;
background-color: #ff0000;
background: -o-linear-gradient(top, #333399, #000066);
background: -moz-linear-gradient(top, #333399, #000066);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));
}
.sapCPCartBtn {
background: none\9;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001E5799', endColorstr='#bb7db9e8', GradientType=1 )\9;
/* ie */
box-shadow: none\9 !important;
background-position: 1px 1px \9;
}​

Answer 1

Try this and one more thing when you are using filter and border radius in a same class in IE rounded corners will not work... try the below css...
.sapCPCartBtn {width: 205px;padding: 10px;text-align: center;height: 32px; box-shadow: none;color: #FFFFFF !important; font-weight: bold;font-size: 1em !important;-moz-border-radius: 10px !important;-webkit-border-radius: 10px !important; border-radius: 10px !important;-khtml-border-radius: 10px !important;-goog-ms-border-radius: 10px !important;margin-top: 5px;text-align: center;display: inline-block;cursor: pointer!important;border: 0px !important;background-color: #ff0000;background: -o-linear-gradient(top, #333399, #000066);background: -moz-linear-gradient(top, #333399, #000066);background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333399', endColorstr='#000066', GradientType=0 ); /* ie */}