Huh? Gradient backgrounds Remove border-radius in IE9???

[cnwtx]

I have 2 different styles for the h1 element, depending on the parent element. In the first one their are no gradients, and the border-radius works. In the second one the border-radius does not work, and I am using gradients. So far, the only browser with this problems is IE 9, in all others everything works as intended. Could someone tell me if gradients are causing this or if there is something else I am missing.

Here is style 1:

h1

{margin: -9px -9px 0px -9px;

padding: 10px 10px 5px;

text-align:right;

background: #AACCEE;

color: #024;

font: bold 25px verdana;

letter-spacing: 0.2em;

height: 28px;

vertical-align: middle;

white-space: nowrap;

border-radius: 10px 10px 0 0;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-goog-ms-border-top-left-radius: 10px;

-goog-ms-border-top-right-radius: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

-moz-box-shadow:inset 0 2px 10px #222244;

-webkit-box-shadow:inset 0 2px 10px #222244;

box-shadow:inset 0 2px 10px #222244;}

Here is the second:

div.sub-content h1

{margin: 0px -8px 0px -8px;

padding:6px 4px 2px 4px;

text-align:center;

color:#DDDDDD;

font: bold 20px "courier new";

border-radius: 12px 12px 0 0;

-moz-border-radius-topleft: 12px;

-moz-border-radius-topright: 12px;

-webkit-border-top-left-radius: 12px;

-webkit-border-top-right-radius: 12px;

-goog-ms-border-top-left-radius: 12px;

-goog-ms-border-top-right-radius: 12px;

border-top-left-radius: 12px;

border-top-right-radius: 12px;

background-color:#333399;

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

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333399', EndColorStr='#000066')";}

Thanks in advance,
Cliff

[markthema3]

Because of the way that the directx filters work, they will be placed on top of border-radius rounded corners. Try using css3pie to get around it.

[jimsilverman]

question: what is “-goog-ms-” for? never seen that prefix before.

[chrisburton]

I’ve seen -ms- as a prefix but not -goog-ms-. By the way, you don’t need the prefix for webkit anymore

[Qbit]

Hi, another solution is to wrap the gradient element into a div. Give the wrapper div the same size and border radius as the gradient element and add overflow:hidden to the wrapper.

I recomend hiding wraper style in an IE style sheet or something. Writing a short jQuery plugin could also be usefull for auto wrapping elements.

-Qbit

[ChromeShark]

I came across this problem & none of the solutions were appropriate for me, but I found one that worked.

If you use http://www.colorzilla.com/gradient-editor/ to generate your gradient, choose the ‘IE9 Support’ option, which adds SVG support. Follow the instructions there to add an extra class in IE9 and this will work with border radius.

[bugejakurt]

Your CSS selectors containing for example:

 -goog-ms-border-top-left-radius: 10px;



/* AND */



border-top-left-radius: 10px;

Both of which renders the top-left-radius on IE9. In short the top-left-radius is being rendered twice on IE9. Removing “-ms” in “-goog-ms-border-top-left-radius: 10px;” fixes this problem.

Note: I noticed this problem because in my blog, I used to specify both styles and noticed that blog scrolling was jerky. After trying to find many small refinements in my blog I realized that both styles are being rendered on IE9.

[tarunsharma20]

Use
background-clip:content-box;

-webkit-background-clip:content-box;

[BrianLewisDesign]

Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. No need for SVG, PIE, JS, or conditional comments.

text or whatever

.ie9roundedgradient {
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.roundedgradient {
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
/* use colorzilla to generate your cross-browser gradients */
}

[Kitty Giraudel]

I’ve read tons and tons of stuff about CSS3, and I have neither ever read about a -goog-ms prefix.

http://stackoverflow.com/a/5411098

[Author]

Posts