border-radius issues in IE 9, 8 , 7

I have attached the image below of the menu which i am using for my site , Apart from IE , all the other browsers renders the correct output :

Even in IE9 the hover effect should be curvy but it comes up with rectangular effect .

Firefox , safari , and chrome works fine :

Css

header nav {
padding:7px 0 10px 0;
}
header nav ul {
float:right;
padding:2px 0 0 0;
}
header nav ul li {
  float:left;
  padding-left:4px;
  }
  header nav ul li a {
    position:relative;
    float:left;
    font-size:14px;
    color:#fff;
    text-decoration:none;
    font-family: 'ColaborateThinRegular';
    text-transform:uppercase;
    height:32px;
    line-height:32px;
    background-color:#181717;
    padding:0 36px 0 10px;
    bor开发者_Python百科der-radius:17px;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    }
  header nav ul li a:hover,
  header nav ul li a.current {
    background-image: -moz-linear-gradient(top, #E53088, #E530C1); /* FF3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E53088),color-stop(1, #E530C1)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1')"; /* IE8 */
border-radius:17px;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;

    }

I am looking for the same behaviour like firefox, chrome and safari

The gradient filter in Internet Explorer doesn't get clipped by the border-radius in Internet Explorer 9. The only solution I can think of involves having an inner <div> element with the gradient applied:

<nav>
  <ul>
    <li>
      <div class="gradient">Home</div>
    </li>
  </ul>
</nav>

Apply the border-radius to the <li> element and the gradient to <div class="gradient">. This should give the correct result.

The only other option, as Salman A mentioned, is CSS3 PIE, which work around this problem for you and implement border-radius in older versions of IE. I'm using this in a couple of projects and it works very well.

Have a look at the CSS3 PIE project. It will make various CSS3 features available in IE 6 through 9; including rounded corners.

try

.class {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

just a quick example

Twitter Bootstrap does the following to solve this issue:

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);