Проблемы с граничным радиусом в IE 9, 8, 7

Я прикрепил изображение ниже меню, которое я использую для своего сайта. За исключением IE, все другие браузеры отображают правильный вывод:

Даже в IE9 эффект наведения должен быть изогнутым, но он имеет прямоугольный эффект.

Firefox, Safari и Chrome работают нормально:

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

    }

Я ищу такое же поведение, как Firefox, Chrome и Safari