Rounded corners on First and Last <li> item

Question

I'm trying to create a top menu in my Wordpress theme, similiar to http://mailchimp.com/. 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.

The menu back ground currently has round corners:

#menu-main-menu{
    margin-top:66px;
    background: #eeeeee;

    -moz-border-radius: 5px;
    border-radius: 5px;
}

no issues here.

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.

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 & STOP below) but it doesn't seem to be rounding the corners as I want.

            body > 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 > header .nav li:last-child a {
                            border-right: none;                                                     
                        }

                        body > header .nav > li.current-menu-item,
                        body > header .nav > li.current-menu-ancestor {
                            background: #c4c4c4;
                        }


        /* START: Its this bit below I'm trying to get working. */

            body > 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 > 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 > header .nav > li.current-menu-item > a,
                body > header .nav > li.current-menu-ancestor > a,
                body > header .nav > li.current-page-ancestor > a,
                body > header .nav > li.current_page_parent > a {               
                    /*background: #ffffff;*/
                    text-shadow: none;                              
                    box-shadow: none;                                       
                }

UPDATE Posting HTML as requested.

<ul id="menu-main-menu" class="nav">
    <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"><a href="http://www.xxxxxx.com">Home</a></li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.xxxxxx.com">Quiénes Somos</a></li>
    <li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18"><a href="http://www.xxxxxx.com">Servicios</a></li>
    <li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-17"><a href="http://www.xxxxxx.com">Noticias</a></li>
    <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.xxxxxx.com">Portfolio</a></li>
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="http://www.xxxxxx.com">Contact</a></li>
</ul>

Any help appreciated.

Regards, Stephen

Answer 1

You have a background color set on the li but you're rounding it's child element's border. Since the li has the background-color applied to it, you need to round its corners and not the li's child. Also, if you want that element to always have rounded corners, you don't need to apply the .current-menu-item class. So that part of your code should look like this:

header .nav li:last-child{                                
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;                

    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;                 
}

It should be the same for the first-child. Except of course you need to change the properties from right to left. This will apply the rounded corners at all times regardless of whether or not the li is the current item. If you want to change the border radius for the current item you need to redefine that property later on in the stylesheet. Otherwise it will stay exactly the same.

Answer 2

Here is a simple example of what you are trying to accomplish.

li{display:inline;}
li a{display:inline-block; padding:20px; background:red;}
li:first-child a{border-top-left-radius: 10px; border-bottom-left-radius: 10px;  }
li:last-child a{border-top-right-radius: 10px; border-bottom-right-radius: 10px;  }
li a:hover,li a.active {background: salmon;}