IE9 border-radius and background gradient bleeding

Question

IE9 is apparently able to handle rounded corners by using the CSS3 standard definition of border-radius.

What about support for border radius and

Answer 1

You can also use CSS3 PIE to resolve this issue:

http://css3pie.com/

Of course, that might be overkill if you're just depending on a single element with rounded corners and a background gradient, but it is an option to consider if you're incorporating a number of common CSS3 features on your pages and want easy support for IE6+

Answer 2

This blog posting helped me: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Basically, you use a conditional comment to remove the filter and then create SVG 'sprites' of gradients which you can use as background images.

Simple and elegant!

Answer 3

You could use shadow to achieve gradient, and is going to work on Internet Explorer 9 with border-radius

Something like this:

box-shadow: inset 0px 0px 26px 5px gainsboro;

Answer 4

I think it's worth mentioning that in many cases you can use an inset box-shadow to "fake" the gradient effect and avoid the ugly edges in IE9. This works especially well with buttons.

See this example: http://jsfiddle.net/jancbeck/CJPPW/31/

Answer 5

I also got stuck in the same problem n found that IE can't render the border radius and gradient both at a time, it both conflicts, the only way to solve this headache is to remove the filter and use the gradient via svg code, just for IE ..

you can get the svg code by using their gradient color code, from Microsoft this site (specially made for gradient to svg):

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

enjoy :)

Answer 6

There is a simple way to make it work under IE9 with just ONE element.

Take a look at this fiddle: http://jsfiddle.net/bhaBJ/6/

First element sets the Border-Radius. Second pseudo-Element sets the Background Gradient.

Few key instructions:

• parent must have relative or absolute position
• parent must have overflow: hidden; (in order to border-radius effect to be visible)
• ::before (or ::after) pseudo-element must have z-index: -1 (workaround kind of)

Base element declaration goes something like:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

Pseudo-Element declaration:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}