CSS border radius - child overlapping parent element

Question

Hey there,

I have the following markup: http://www.webdevout.net/test?011 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

Answer 1

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.