A question of parent parent question with CSS3

Question

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> 

Links now fit exactly in #wrap, but #wrap has a border radius and black background. Since the links have a white background when you hover, the first child and the last child are located above the corners of the border radius. But as they sit on top, the #wrap background hides, hiding the radius of the border.

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

Sometimes when assigning the first and last child, the border does not work, say, if I wanted it on my wrapper div,

 padding: 5px 10px; 

Then, even if I needed to assign a border radius, they would not match what makes it ugly.

Answer 1

overflow: hidden commit the following :)

 #wrap { overflow: hidden; ... } 

jsFiddle .

Example

I made a yellow background to see it clearly. As you can see, black dirt breaks through the edge. Example from Chrome 10 on OS X.