Chrome doesn't get rounded CSS borders

Question

I'm having a problem with Chrome displaying my rounded corners on a drop down navigator that I built from scratch. Rounded corners render very well in Firefox, but Chrome and IE9 don't seem to want to display my corners. I changed my rounded corner call to the last <li> element in my drop-down list, as well as the last <a> , which I displayed as blocks with width and height properties, but it doesn't do the trick!

So, I decided that I would post here to find out if anyone could push you in the right direction.

The site is still in its early development, so don't worry about backup 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 can do it as follows:

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

You also need to get rid of the remaining 40px to the left of the containing ul

Indenting the bottom is fine, but makes it a little dirty, especially if you use borders around 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 is on a rounded border. Thus, the white background of the link will be shown along the edge of the rounded border. To fix this, you can remove the background of the link or add an add-on to the bottom of the drop-down list. Another option would be to set the radius of the border of the last a in each drop-down list.

Change Background:

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

Gasket:

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

Answer 3

this is an overflow problem. All elements inside a rounded border need the same border radius.

http://jsfiddle.net/pixelass/KZXnT/

 #mainNavli > ul > li.last, #mainNav > li ul > li.last a { -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; }