How to round the corners of the header nav/menu

[Susie]

http://goo.gl/TLxyD

 

I'm stumped on another issue....

 

I would like to make the left corners (top/bottom) of the header nav/menu rounded using CSS3 but I can't figure out where to apply the code. I've tried adding it to this but it didn't work:

 

#header ul.nav,

#header ul.menu {

float: right;

}

 

The corners appear when I apply it to the li, but then each li is rounded and that's not what I'm looking for.

 

Can someone take a peek?

[falkencreative]

Seems like adding the rounded corners to the ul, and also overflow:hidden; will take care of things. (At least, it did when testing in Firebug.)

 

You could also always apply the left corner to li:first-child and the right corner to li.page-item-16.

[Susie]

Thanks, Ben. I was missing the overflow:hidden.