CSS3 border-radius parent child question

Question

Let's say I have this css,

#wrap {width: 190px; padding: 0 10px; border-radius: 10px; background: #000;}
#wrap a {width: 190px; padding: 10px; display: block;}
#wrap a:hover {background: #fff;}

And this html,

<div id="wrap">
<ul>
<li><a href="#">Some Link 1</a></li>
<li><a href="#">Some Link 2</a></li>
<li><a href="#">Some Link 3</a></li>
<li><a href="#">Some Link 4</a></li>
</ul>
</div>

Now the links fit exactly within the #wrap, but the #wrap has a border radius and a black background. Because on hover the links have a white background, the first child element and last child element sit above the border radius corners. But as they sit on top the background of the #wrap get hidden hiding the border-radius.

I know I can assign the first and last childs a border radius, but is there an easier way to do this?

There are times when assigning the first and last child a border radius will not work, say if I wanted this on my wrapper div,

padding: 5px 10px;

Then even if I was to assign a border radius, they will not match making it ugly.

Answer 1

overflow: hidden will fix that :)

#wrap {
   overflow: hidden;
   ...
}

jsFiddle.

Example

I made the background yellow to see it clearly. As you can see there is some blackness bleeding in on the edge. The example is from Chrome 10 on OS X.