Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

IE Gradient and border Radius issue

IE Gradient and border Radius issue


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




.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;
Problem courtesy of: user1853128


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 */}

Solution courtesy of: Gopikrishna


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

IE Gradient and border Radius issue


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription