title: Rounded corners on First and Last <li> item
body: <p>I'm trying to create a top menu in my Wordpress theme, similiar to <a href="http://mailchimp.com/" rel="noreferrer">http://mailchimp.com/</a>. As you can see from this menu, when 'Pricing' is active the background changes to white. I trying to implement the same effect on my menu.</p>
  
  <p>The menu back ground currently has round corners:</p>
  
  <pre><code>#menu-main-menu{
      margin-top:66px;
      background: #eeeeee;
  
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  </code></pre>
  
  <p>no issues here.</p>
  
  <p>But the problem occurs when 'Home' (first item in the menu) or 'Contact' (last item in the menu) are active, the corners are no longer rounded.</p>
  
  <p>Obviously for 'Home' I only want the left hand corners rounded and for 'Contact' I want the right hand corners rounded. Here's what I'm trying at the moment (See CSS between START &amp; STOP below) but it doesn't seem to be rounding the corners as I want. </p>
  
  <pre><code>            body &gt; header .nav li a {
                              background: none;
                              text-decoration: none;
                              /*font-family: TitilliumText22L005, sans-serif;*/
                              font-family: 'Open Sans', sans-serif;
                              font-size: 13px;
                              color: #000000;
                              text-shadow: none;
                              text-transform: uppercase;
                              border-right: solid 1px #000000;
                          }
  
                          body &gt; header .nav li:last-child a {
                              border-right: none;                                                     
                          }
  
                          body &gt; header .nav &gt; li.current-menu-item,
                          body &gt; header .nav &gt; li.current-menu-ancestor {
                              background: #c4c4c4;
                          }
  
  
          /* START: Its this bit below I'm trying to get working. */
  
              body &gt; header .nav li:first-child .current_menu_item{                                               
                                  -moz-border-radius-topleft: 5px;
                                  -moz-border-radius-bottomleft: 5px;             
  
                                  border-top-left-radius: 5px;
                                  border-bottom-left-radius: 5px;                             
                              }
  
                              body &gt; header .nav li:last-child .current_menu_item{                                
                                  -moz-border-radius-topright: 5px;
                                  -moz-border-radius-bottomright: 5px;                
  
                                  border-top-right-radius: 5px;
                                  border-bottom-right-radius: 5px;                                
                              }
  /* STOP */
  
      body &gt; header .nav &gt; li.current-menu-item &gt; a,
                  body &gt; header .nav &gt; li.current-menu-ancestor &gt; a,
                  body &gt; header .nav &gt; li.current-page-ancestor &gt; a,
                  body &gt; header .nav &gt; li.current_page_parent &gt; a {               
                      /*background: #ffffff;*/
                      text-shadow: none;                              
                      box-shadow: none;                                       
                  }
  </code></pre>
  
  <p><em>UPDATE</em>
  Posting HTML as requested.</p>
  
  <pre><code>&lt;ul id="menu-main-menu" class="nav"&gt;
      &lt;li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-15"&gt;&lt;a href="http://www.xxxxxx.com"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"&gt;&lt;a href="http://www.xxxxxx.com"&gt;Quiénes Somos&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18"&gt;&lt;a href="http://www.xxxxxx.com"&gt;Servicios&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-17"&gt;&lt;a href="http://www.xxxxxx.com"&gt;Noticias&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"&gt;&lt;a href="http://www.xxxxxx.com"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"&gt;&lt;a href="http://www.xxxxxx.com"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any help appreciated.</p>
  
  <p>Regards, Stephen</p>