CODEWITHSUNDEEP
htmlinternet-explorer-9css
BILL
BILL

Reputation: 4869

Why border-radius doesn't work in IE9?

I've this html

 <a class="command" href="/">My profile</a>

and this css

padding-bottom:4px;
padding-left:8px;
padding-right:8px;
margin-right:5px;
display:inline-block;
text-decoration:none;
background:linear-gradient(tobottom,rgb(126,197,22) 0 #86c825 9% #8ecc32 16% #8ecc32 47% #88c332 63% #7cae32 84% #76a82c 88% #6da122 91%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ec516',endColorstr='#6da122',GradientType=0);
text-shadow:1px 1px 2px #555;
border-radius:10px;
height:22px;
text-align:center;
font-size:11.3pt;
color:#fff;

I've added

<meta http-equiv="X-UA-Compatible" content="IE=edge">

and change doctype to 

<!DOCTYPE html>

but it doesn't help me. How to fix this problem ?

Upvotes: 0

Views: 873

Answers (2)

Spudley
Spudley

Reputation: 168685

IE9 does support border-radius.

However, there is a well known bug in IE9 when you use filter gradients in conjunction with border-radius. The gradient will be rendered as a box without rounded corners, and will be placed on top of any border radius you've defined. The rounded corners are there; you just can see them.

There is no way around this using filter for your gradients: if you use filter gradients, then your rounded corners will not work in IE9.

The solution is to render the gradients using a different technique. There are two options I can suggest:

  • Use an SVG data-URL.

    This basically involves creating an SVG image for your gradient, converting it to a base-64 encoded data-URL, and then sticking it directly into your CSS code. It's ugly, but it does work. You'll want to make it specific to IE9 though, as otherwise it might interfere with your gradients in other browsers. And you'll still need to keep the filter if you want to support IE8, so that'll also need to be made browser-version specific so it isn't used by IE9. As I said, it's an ugly solution.

    If you do want to use this option, there is a generator you can use for it here: http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

  • Use a polyfill script like CSS3Pie.

    CSS3Pie is a little Javascript library that adds support in all IE versions for a bunch of CSS features that aren't normally supported. This includes CSS gradients, and also border-radius for IE8 and earlier. It's easy to use, and allows you to use standard CSS code for all browsers, even older IEs. The only down-side is that it is a Javascript library, so if your user has JS disabled he won't see it. Fortunately that's pretty rare these days, so it's generally safe to use. This is my recommended solution.

Upvotes: 2

suff trek
suff trek

Reputation: 39777

It works if you remove background-gradient - that IE9 does not support:

.command {
    padding-bottom:4px;
padding-left:8px;
padding-right:8px;
margin-right:5px;
display:inline-block;
text-decoration:none;
background-color:green;    
text-shadow:1px 1px 2px #555;
border-radius:10px;
height:22px;
text-align:center;
font-size:11.3pt;
color:#fff;
}

http://jsfiddle.net/7BcTT/2/

Upvotes: 1

Related Questions