CSS border radius - child overlapping parent element

I have the following markup: http://www.webdevout.net/test?01开发者_Python百科1 As you can see, the "li" element is overlapping the rounded borders defined for the box.

Is there a way to prevent this apart from applying the corner directly to the last "li"?

Thanks

You can move the background colour to .box and remove the border-bottom from last li:

.box {
    background-color: #E6E6E6;
}

#vmenu li:last-child a {
    border-bottom: none;
}

On a side note, you don't need the surrounding div, just add the .box class to the ul.