title: rounded corner menu item in css without CSS3!
body: <p>I try to achieve the following output:</p>
  
  <p><img src="https://i.stack.imgur.com/87S8Q.png" alt="normal view"></p>
  
  <p><img src="https://i.stack.imgur.com/uGu93.png" alt="after hover this will show"></p>
  
  <p>i want to achieve this with HTML and CSS. I do not want to use CSS3(as my client do not want me to!). I try the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;registration&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Sch's direc&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;faculty &amp;amp; staff&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Campuses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;History&lt;/a&gt;&lt;/li&gt;            
          &lt;li&gt;&lt;a href="" &gt;Mission&lt;/a&gt;&lt;img src="images/right_menu.png" /&gt;&lt;/li&gt;
          &lt;li style="margin:0;padding:0;"&gt;&lt;img src="images/left_menu.png" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu ul{
      list-style:none;
  
  }
  
  .menu li{
      float:right;
      background:url('images/menuBGrepX.png') repeat-x ;
      margin-right:10px;
      text-transform:uppercase;
  }
  
  .menu a{
      display:block;
      text-decoration:none;
      color:#fff;
      padding:5px 2px;
      float:left;
  }
  
  
  
  .menu li.selected{
      background:#A07E4E;
  
  }
  
  .menu li:hover{
      background:#A07E4E;
      color:#313131;
  
  }
  </code></pre>
  
  <p>As you can expect the background color of <code>li</code> is changing when some one hover over it but the left and right image which I use for give a rounded border feel, it remain same. Please help me. You can check temporary work here : <a href="http://www.examplecode.info/enam/pleasehelp/" rel="nofollow noreferrer">http://www.examplecode.info/enam/pleasehelp/</a>.Thanks in advance. </p>