Chrome not receiving CSS rounded borders

Question

I am having an issue getting Chrome to display my rounded corners on a drop down nav I have built from scratch. The rounded corners are displaying just fine in Firefox, but Chrome and IE9 don't seem to want to render my corners. I have changed my rounded corner call to the last <li> element in my drop down as well as the last <a> which I have displayed as blocks with a width and height properties, but nothing seems to do the trick!

So I figured I would post here to see if anyone can give me a nudge in the right direction.

The site is still in early development, so don't worry about the redundant anchor links.

My HTML:

<nav>
        <ul id="mainNav">
            <li>
                <a href="highlevel.html" class="autos"></a>
                <ul>
                    <li><a href="subcategory.html">News</a></li>
                    <li><a href="subcategory.html">Reviews</a></li>
                    <li><a href="subcategory.html">Car Tech</a></li>
                    <li><a href="subcategory.html">Fuel Economy &amp; Safety</a></li>
                    <li><a href="subcategory.html">Buying &amp; Selling</a></li>
                    <li><a href="subcategory.html">Everything Else</a></li>
                </ul>
            </li>
            <li>
                <a href="highlevel.html" class="lifestyles"></a>
                <ul>
                    <li><a href="subcategory.html">Music</a></li>
                    <li><a href="subcategory.html">Food</a></li>
                    <li><a href="subcategory.html">Travel</a></li>
                    <li><a href="subcategory.html">Shopping</a></li>
                    <li><a href="subcategory.html">Everything Else</a></li>
                </ul>
            </li>
            <li>
                <a href="highlevel.html" class="people"></a>
                <ul>
                    <li><a href="subcategory.html">Who You Know</a></li>
                    <li><a href="subcategory.html">Who You Should Know</a></li>
                    <li><a href="subcategory.html">Everyone Else</a></li>
                </ul>
            </li>
            <li>
                <a href="highlevel.html" class="tech"></a>
                <ul>
                    <li><a href="subcategory.html">Business</a></li>
                    <li><a href="subcategory.html">Pleasure</a></li>
                    <li><a href="subcategory.html">Everything Else</a></li>
                </ul>
            </li>
            <li>
                <a href="highlevel.html" class="trends"></a>
                <ul>
                    <li><a href="subcategory.html">Online</a></li>
                    <li><a href="subcategory.html">Offline</a></li>
                    <li><a href="subcategory.html">Everything Else</a></li>
                </ul>
            </li>
        </ul>
    </nav><!-- /Main Nav -->

My CSS:

nav {
    display:block;
    position:relative;
    width:980px;
    height:41px;
    background:url(../../images/nav_bg.png) center top no-repeat;
    margin:0 auto;
    border-bottom:2px solid #777;
    z-index:9998;
}

#mainNav {
    display:block;
    position:relative;  
    background:#fff;
}

#mainNav li {
    float:left; 
}

#mainNav li a {
    display:block;
    position:relative;
    width:125px;
    height:41px;
    overflow:hidden;
}

#mainNav li a.autos {
    display:block;
    position:relative;
    width:125px;
    height:41px;
    background:url(../../images/nav1.png) center top no-repeat;
}

#mainNav li a.autos:hover {
    background:url(../../images/nav1.png) center -41px no-repeat;
}

#mainNav li a.lifestyles {
    display:block;
    position:relative;
    width:125px;
    height:41px;
    background:url(../../images/nav2.jpg) center top no-repeat;
}

#mainNav li a.lifestyles:hover {
    background:url(../../images/nav2.jpg) center -41px no-repeat;
}

#mainNav li a.people {
    display:block;
    position:relative;
    width:125px;
    height:41px;
    background:url(../../images/nav3.jpg) center top no-repeat;
}

#mainNav li a.people:hover {
    background:url(../../images/nav3.jpg) center -41px no-repeat;
}

#mainNav li a.tech {
    display:block;
    position:relative;
    width:125px;
    height:41px;
    background:url(../../images/nav4.jpg) center top no-repeat;
}

#mainNav li a.tech:hover {
    background:url(../../images/nav4.jpg) center -41px no-repeat;
}

#mainNav li a.trends {
    display:block;
    position:relative;
    width:125px;
    height:41px;
    background:url(../../images/nav5.jpg) center top no-repeat;
}

#mainNav li a.trends:hover {
    background:url(../../images/nav5.jpg) center -41px no-repeat;
}

/* === Dropdown Menu Styles === */

#mainNav ul {
    display:none;   
    position:absolute;  
    z-index:9998;
}

#mainNav li:hover ul {
    display:block;
    position:absolute;
    width:160px;
    height:auto;
    border-right:1px solid #999;
    border-left:1px solid #999;
    overflow:hidden;

    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px; 

    -webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
    box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
}

#mainNav li:hover ul li a {
    display:block;
    width:160px;
    height:auto;
    background:#fff;
    padding:5px 0;
    border-bottom:1px solid #999;

    font-family: 'Swiss721Light', Verdana, Arial;
    text-indent:10px;
    text-decoration:none;
    font-size:14px;
    line-height:16px;
color:#555;
}

#mainNav li:hover ul li a:hover {
    background:#eaeaea;
}

Answer 1

You could do it like this:

#mainNav li:hover ul li:last-child a{
    border-radius: 0px 0px 7px 7px;     
}

You also need to get rid of the 40px padding-left on the containing ul

Adding padding to the bottom is fine but makes it look a little messy especially if you are using borders around the individual links

Answer 2

Chrome and IE do not hide content that overflows the border radius. Your dropdown links are currently set to background: white; and the bottom one overflows the rounded border. Therefore, the white background of the link will be shown over the edge of the rounded border. To fix this, you can remove the background of the link or add padding to the bottom of the dropdown. Another option would be to set the border radius of the last a in each dropdown.

Change background:

#mainNav li:hover ul li a {
    background: #fff; /* remove this line */
    border-bottom: ... /* change to border-top */
}

Padding:

#mainNav li:hover ul {
    ...
    padding-bottom: 7px;
}