CSS3 border-radius parent child 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">
<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>

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.

Problem courtesy of: Version1


overflow: hidden will fix that :)

#wrap {
overflow: hidden;




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.

Solution courtesy of: alex

View additional discussion.