border-radius not work in IE9

[ACTIONpack]

I'm trying to do border-radius for my links which is working for the top link but when I do it in the bottom once it does not work in IE9. I know why this it's not working but it should be working. Any I idea why it's not working?

http://www.roma-usa.com

.social a:link {
height:35px;
width:35px;
list-style:none;
text-decoration:none;
float:left;
margin:0 6px;
border-radius: 6px;
-ie-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
-webkit-box-shadow:  0px 0px 12px 1px rgba(0, 0, 0, .4);
-moz-box-shadow:  0px 0px 12px 1px rgba(0, 0, 0, .4);
box-shadow:  0px 0px 12px 1px rgba(0, 0, 0, .4);

background: rgb(70,69,71); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ2NDU0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzIzMWYyMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(70,69,71,1) 0%, rgba(35,31,32,1) 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,69,71,1)), color-stop(60%,rgba(35,31,32,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(70,69,71,1) 0%,rgba(35,31,32,1) 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(70,69,71,1) 0%,rgba(35,31,32,1) 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(70,69,71,1) 0%,rgba(35,31,32,1) 60%); /* IE10+ */
background: linear-gradient(top,  rgba(70,69,71,1) 0%,rgba(35,31,32,1) 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464547', endColorstr='#231f20',GradientType=0 ); /* IE6-8 */
}
.social a:hover {
opacity: .7;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 200ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 200ms;
-ie-transition: opacity;
-ie-transition-timing-function: ease-out;
-ie-transition-duration: 200ms;
-o-transition: opacity;
-o-transition-timing-function: ease-out;
-o-transition-duration: 200ms;
transition-timing-function: ease-out;
transition-duration: 200ms;
-webkit-box-shadow:  0px 0px 6px 1px rgba(0, 0, 0, .5);
-moz-box-shadow:  0px 0px 6px 1px rgba(0, 0, 0, .5);
box-shadow:  0px 0px 6px 1px rgba(0, 0, 0, .5);
}
[/CODE]

[nyolc8]

try -ms-border-radius

[Mathachew Veteran]

Surprisingly I'm a bit stumped by this, but I noticed that you have -ie-border-radius. I have never seen that and don't believe it's even a real attribute. You can also apply the border radius to the image. I've done it in the past without issue. If that doesn't work then I'm really stumped. If only IE's developer tools were more intuitive for debugging...

[Mike]

It's down to the filter property, remove that for IE9

[Seahorsepip Veteran]

  On 18/04/2012 at 17:20, Mike said:

It's down to the filter property, remove that for IE9

Yup you're right, IE9+ supports "border-radius" and below doesn't support any form of border-radius at all (can be fixed by using csspie as example).

Also filters really work bad in IE9+, so try to avoid them or put them with csshacks or seperate stylesheets for IE6-8