Why show the corners despite border-radius applied in IE and earlier?

Question

I have a problem but not exactly with the border radius, but amm not know how to explain but I put 2 images as seen in chrome, firefox, etc and another image of as seen in IE9 and earlier.

CHROME and Others browsers

enter image description here

IE9 and earlier

enter image description here

Seems that despite applying the border-radius, still show those corners.

aside#sidebar ul {
    margin-top: 15px;
    width: 100%;
    height: 200px;
    background: transparent;
}
aside#sidebar ul li {
    font-size: 14px;
    list-style-type: none;
    margin-bottom: 5px;
    background: transparent;
    //border: 3px solid white;
}
aside#sidebar ul li a {
    display: block;
    padding: 5px;
    color: white;
    border-left: 10px solid white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    behavior: url(PIE.htc);
    background: transparent;
}

EDIT

Does it have something to do this part? Background used for each item in the list, and this is the background of the first

aside#sidebar #itemLinea1 {
    //border-color: #DE9E26;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,0.75) 50%, rgba(248,181,0,0.75) 51%, rgba(251,223,147,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,0.75)), color-stop(51%,rgba(248,181,0,0.75)), color-stop(100%,rgba(251,223,147,0.5)));
    background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(252,205,77,0.75) 50%,rgba(248,181,0,0.75) 51%,rgba(251,223,147,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#80fbdf93',GradientType=0 );
    transition: border 0.3s linear;
    -webkit-transition: border 0.3s linear;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
}

At what should be?

Try adding border-radius:12px; - the other two are specific to webkit and mozilla browsers — Michael Peterson, Aug 02 '12 at 20:13
I created a fiddle with your code and it appears to work fine. http://jsfiddle.net/87R5b/1/ I tested it in IE9. — mwcz, Aug 02 '12 at 20:19
Is the first element of the list, is the color gradient yellow! — SoldierCorp, Aug 02 '12 at 20:30

BoltClock · Accepted Answer · 2012-08-02T20:40:58.297

1

You're using an IE filter to apply a gradient to your elements. Unfortunately, these filters will not be clipped by border-radius as they are not painted on the box's background, whether you're applying border-radius to the same elements or their containers.

If you need to apply a gradient background, your best bet is to use a background image. If you only need to support IE9, ditch the filter and keep the SVG background image.

edited Aug 02 '12 at 20:40

answered Aug 02 '12 at 20:33

BoltClock

700,868
160
1,392
1,356

Yeah. works! Just leave the first line that is the SVG image. Thanks!! – SoldierCorp Aug 02 '12 at 20:40
1

More info about border-radius and gradient bleeding in IE9: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – mwcz Aug 02 '12 at 20:50

score 0 · Answer 2 · answered Aug 02 '12 at 20:13

0

Try using just border-radius, you need the core one, not just to target firefox and webkite, otherwise it is because those earlier browsers either don't support border radius, or you aren't using the proper prefix, -ms- for microsoft

answered Aug 02 '12 at 20:13

Andy

14,427
3
52
76

I use only border-radius and did not work, then place-ms-border-radius and neither worked! – SoldierCorp Aug 02 '12 at 20:19
IE9 supports `border-radius`. There is no need to use an -ms- prefix or to remove the Firefox and Webkit prefixed properties. – mwcz Aug 02 '12 at 20:22

score 0 · Answer 3 · answered Aug 02 '12 at 20:33

The problem is that you're applying rounded corners to the a element, but are assigning the background color to the underlying li element. So you have a rounded rectangle sitting on top of a non-rounded rectangle with a colored background. Hence, the corners of the non-rounded rectangle stick out.

Compare these two fiddles:

Broken: http://jsfiddle.net/87R5b/2/ Fixed: http://jsfiddle.net/87R5b/3/

In the second one, I applied the yellow gradient to the a element instead. That's just one possible solution, but it should work for you.

Hope this helps!

Is correct, but I already had the code that way. The ID's have placed them in the 'a' and not the 'li'.. the solution es only used the first line of background.. the img svg! But thanks! — SoldierCorp, Aug 02 '12 at 20:38

Why show the corners despite border-radius applied in IE and earlier?

3 Answers3