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 background gradient? Yes IE9 is to support them both separately, but if you mix the two the gradient bleeds out of the rounded corner.

I am also seeing strangeness with shadows showing as a solid black line under a box with rounded corners.

Here are the images shown in IE9:

image with no bleed, but sharp corners image with bleed

How can I work around this problem?

Thanks for the tips @MikeP and @meanstreakuk. I guess the answer i'm looking for is more along the lines of when will IE truly support gradients/rounding or how do i get the two to work together. — SigmaBetaTooth, Feb 26 '11 at 18:13
You have the answer from @meanstreak for how to get the 2 to work together. If you want to be realistic, SVG gradients as background images are far more likely to be fully supported by all browsers much sooner than css gradients (which are still under heavy development/discussion). — Kevin Peno, Mar 17 '11 at 20:44
Unbelievable MS is so far behind. It's 2011 and IE is still dealing with this kind of issues. zzzzzzz. ..on their site they say: "fast is now beautiful". Sure it is. Take a look at the pictures posted above. WHAT A RECTANGULAR BEAUTY! — SunnyRed, Aug 02 '11 at 16:52
SunnyRed, well, in Chrome elements contained in something with rounded corners bleed over the corners. Really, it's 2012 and browsers are still dealing with this kind of issues :-) — Joey, Jul 05 '12 at 13:24
@Joey: That is by design; see [this question](http://stackoverflow.com/questions/8582176/should-border-radius-wrap-the-content). — BoltClock, Aug 02 '12 at 20:56

score 105 · Answer 1 · edited Oct 04 '11 at 11:06

105

I have also been working with this problem. Another "solution" is to add a div around the item that has the gradient and rounded corners. Make that div the same height, width, and rounded corner values. Set the overflow to hidden. This is basically just a mask, but it works for me.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

edited Oct 04 '11 at 11:06

Simon P Stevens

27,303
5
81
107

answered May 05 '11 at 14:23

user740128

1,051
2
7
2

3

This works perfectly for me and is much simpler than the other proposed solutions. – Simon P Stevens Oct 04 '11 at 11:01
Much easier than the currently accepted answer. This works in IE9 for me. – Andy McCluggage Mar 28 '12 at 11:59
This works...so sad and pathetic. This is the 'HTML5' browser!? Why am I not excited about IE10. – Todd Vance May 29 '12 at 21:03
@toddv Don't worry. It'll all be over soon. Not soon enough, but soon. See http://daringfireball.net/linked/2012/07/04/windows-hegemony With any luck, no one will ever have to worry about supporting IE12... maybe IE14 - it get's fuzzy. – jinglesthula Jul 20 '12 at 15:25
Sadly `overflow: hidden` isn't always convenient. – Dunhamzzz Jul 30 '12 at 10:33
2

Just a minor note, but your border radius statements should be reversed to promote forwards compatibility. I made the edit. – Parris Oct 15 '12 at 22:32
For some reason I had to add `padding-bottom:1px` to `.mask` to keep it from cutting off the bottom border in Chrome/Webkit – Kevin Borders Jan 30 '13 at 05:44
Worked great! Thank you! As a "gotcha", the inner element needed to not have any margin or margin:0; in my case... haha, that took me a minute. – teewuane Jun 20 '13 at 18:42
My solution use the same technique, but with no redundant unsemantic html mess. Just using ::before or ::after pseudoelement. See my answer bellow. – Marakoss Sep 27 '13 at 14:22
This works fine for divs but unfortunately doesn't work on table when the gradient is applied on `th` – alexmngn Jan 14 '15 at 16:07

score 48 · Accepted Answer · edited Aug 02 '12 at 21:12

48

Here's one solution that adds a background gradient, using a data URI to create a semi-transparent image that overlays any background color. I've verified that it's clipped correctly to the border radius in IE9. This is lighter weight than SVG-based proposals but as a downside, is not resolution-independent. Another advantage: works with your current HTML/CSS and does not require wrapping with additional elements.

I grabbed a random 20x20 gradient PNG via a web search, and converted it into a data URI using an online tool. The resulting data URI is smaller than the CSS code for all that SVG mess, much less the SVG itself! (You could apply this conditionally to IE9 only using conditional styles, browser-specific css classes, etc.) Of course, generating a PNG works great for button-sized gradients, but not page-sized gradients!

HTML:

<span class="button">This is a button</span>

CSS:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}

edited Aug 02 '12 at 21:12

Robert Harvey

178,213
47
333
501

answered Mar 16 '11 at 21:23

Steve Eisner

2,005
23
35

1

And the winner is... I guess if i have to pick one this is it. I was hoping to see more information for when IE would actually support what it says it supports. As for background image solution, I'm partial to not pulling in images to make IE behave. Thanks everyone for their helpful suggestions. – SigmaBetaTooth Mar 21 '11 at 17:03
1

I found that setting `background-size: 100% 103%; background-position:center;` is better. 100% for both values adds some strange border at the top and bottom. – Morten Christiansen Jun 10 '11 at 11:46
Adding background-size: 100% 103%; background-position:center; doesn't do anything for me. – Gregory Bolkenstijn Sep 22 '11 at 10:47
'IE would actually support what it says it supports' lol, don't hold your breath on that one ;) – danwellman Sep 29 '11 at 08:29
2

Not quite sure why you are using the data uri and not just an image? I guess an image would mean an extra call to the server for ie9 users, but to have all those extra characters sent to non-ie9 browsers seems wasteful. Solution is working for me as an image, would love the explanation. – Decoy Dec 21 '11 at 19:38
4

His manual data URI is what some CSS preprocessor normally do during deploy time. As of "but what kind of an ugly hack is that", that's a cardinal bullshit. SVG is image as any other, although a vector one. So calling SVG a hack, and proposing a PNG instead is absolute non-sense. Why is SVG better? Resolution independence, the same reason you use border-radius instead of rasterized image background. – skrat Mar 13 '12 at 11:11
As far as SVG vs PNG, stretched PNGs will create banding artifacts, stretched SVG gradients will not. – Charles Kendrick May 15 '12 at 22:01
Also, an SVG background can also be embedded as a "data:" URI, and Compass appears to have experimental support for generating SVG backgrounds along with other browser-specific CSS from a single gradient definition. http://compass-style.org/examples/compass/css3/gradient/ – Charles Kendrick May 15 '12 at 22:54
These are great points and thank you for opening my eyes to a particular use of SVG that I hadn't considered! I'll stick by my solution for most cases, esp. since it's easy to generate a larger gradient that's good enough for your specific scenario. But it's good to have your comments & I'll edit my answer. @skrat, the SVG proposed in another answer WAS an ugly hack. SVG in general is just fine. – Steve Eisner May 16 '12 at 22:26
@Decoy - I did it for the reason you mentioned, to avoid an extra hit. You could serve it from a conditional sheet if concerned about the byte overhead. – Steve Eisner May 16 '12 at 22:34
You can generate the base64 string uploading your image to this site: http://www.abluestar.com/utilities/encode_base64/index.php – Junior Mayhé Jun 29 '12 at 11:08
In my experience, this doesn't seem to work if IE9's security level is set to 'High'. – Gary Stanton Oct 17 '12 at 16:06

Jan Beck · Answer 3 · 2012-07-30T10:26:21.450

44

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/

Comparison of a button style with either linear gradient or box-shadow

edited Jul 30 '12 at 10:26

answered May 07 '12 at 10:52

Jan Beck

1,000
7
13

2

Excellent fix in my case because I used this only on a button and needed a gradient just like you drew. I used conditional comments for gte IE9 for now and then applied `box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);` – Volomike May 22 '12 at 19:40
1

+1 for thinking outside the box. Works exceedingly well for tabs as well as buttons. Using the inset keeps the gradient inside the element. – GlennG Nov 05 '12 at 03:29
This is the best solution I've seen. Pure css, doesn't require extra elements, or images. – Zaqx Jan 17 '13 at 02:12
1

nice trick but i have gradients all over the site. i can't change all of them for stupid ie. – Mehmet Fatih Yıldız Mar 20 '13 at 19:13

score 8 · Answer 4 · answered Mar 10 '11 at 06:52

8

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+

answered Mar 10 '11 at 06:52

Louis L.

483
4
10

1

even with css3pie and ie9, I do not see the gradient. I see the rounded corners and the drop shadow, but no gradient. – Kevin Mar 30 '11 at 15:51

score 7 · Answer 5 · answered Feb 23 '11 at 02:21

I ran into this bug too. My suggestion would be to use a repeated background image for the gradient in ie9. IE9 correctly tiles the image behind the rounded borders (as of RC1).

I fail to see how writing 100 lines of code to replace 1 line of CSS is simple or elegant. SVG is cool and all, but why go through all that when easier solutions for gradient backgrounds have been around for years.

score 5 · Answer 6 · answered Oct 25 '12 at 06:35

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

score 5 · Answer 7 · answered Feb 12 '13 at 18:52

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

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

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

score 4 · Answer 8 · answered Aug 30 '12 at 20:18

IE9 handles border-radius and gradients together properly. The problem is that IE9 renders the filter proper in addition to the gradient. The way to properly solve this is to disable filters on the style declarations that utilize the filter property.

As an example on how to best solve this:

You have a button class in your main stylesheet.

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

In a conditional IE9 stylesheet:

.btn { filter: none; }

As long as the IE9 stylesheet is referenced in your head after your main stylesheet this will work perfectly.

ie9 does not render linear gradients – James Westgate Jul 17 '13 at 16:30 — James Westgate, Jul 17 '13 at 16:30

score 4 · Answer 9 · answered Feb 21 '11 at 17:09

4

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!

answered Feb 21 '11 at 17:09

I live this. Especially big ups for helping me FINALLY end my search on how to create sprites using SVG. Since SVG is scaleable, and sprites are possible, I find SVG sprite packs far more versetile than css gradients and, like I said above, will likely see 100% support in browsers long before CSS gradients. – Kevin Peno Mar 17 '11 at 20:46
Oh, only thing I would add to this is that currently webkit and, I believe, opera also support SVG in CSS image `url()` calls. Only one hold out left, thus, drop the 1000 conditionals and serve SVG for the bg on all that support it. For everyone else, serve a rastered image. Then this hack becomes managable. – Kevin Peno Mar 17 '11 at 20:48

score 3 · Answer 10 · answered Sep 27 '13 at 14:13

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

}

I set the border-radius to 20 in your example, and the borders are not clipped in IE9 — crush, Jun 17 '15 at 22:33

score 2 · Answer 11 · answered Aug 25 '11 at 13:53

I decided to disable IE9 from rounding corners to workaround this bug. It's clean, easy and generic usable.

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}

score 1 · Answer 12 · answered Apr 30 '12 at 20:48

background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

Was doing this to me and once I removed the "filter:" line the bleeding went away. Plus I use PIE.

Bleeds:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Does not bleed:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Quick IE Shadow Fix:

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}

score 1 · Answer 13 · edited Oct 11 '12 at 07:46

1

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;

edited Oct 11 '12 at 07:46

Michael Schmidt

9,090
13
56
80

answered Jul 28 '12 at 22:48

Rajesh

53
4

score 1 · Answer 14 · answered Jun 21 '11 at 16:46

The mask div in IE9 is a good idea. I am supplying some complete code to help clarify a bit. While I am not happy with wrapping the button in a DIV, I think it's easier to understand than embedding a PNG mask or going through all the effort using SVG. Maybe IE 10 will support it properly.

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>

score 0 · Answer 15 · answered Jul 05 '12 at 13:16

0

Not sure if this was a one off or a valid workaround but...

I found that provided the border-radius is greater than the border width, I didn't encounter the issue. When they were the same I was getting the square corners.

answered Jul 05 '12 at 13:16

daddywoodland

1,512
2
12
16

raam86 · Answer 16 · 2012-08-17T04:50:41.073

Using compass and sass you can easily achieve this like so:

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

Compass will generate a SVG image for you.

like so:

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}

score 0 · Answer 17 · answered Jun 11 '13 at 09:05

Works for me...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

css

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);

IE9 border-radius and background gradient bleeding

17 Answers17

Linked