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

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 );

}