title: border-radius issues in IE 9, 8 , 7
body: <p>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 :</p>
  
  <p><img src="https://i.stack.imgur.com/qOvjr.jpg" alt="enter image description here"></p>
  
  <p>Even in IE9 the hover effect should be curvy but it comes up with rectangular effect .</p>
  
  <p>Firefox , safari , and chrome works fine :
  <img src="https://i.stack.imgur.com/GmK1H.jpg" alt="enter image description here"></p>
  
  <p>Css</p>
  
  <pre><code>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;
  
      }
  </code></pre>
  
  <p>I am looking for the same behaviour like firefox, chrome and safari</p>