CSS border-radius parent child issue (with :hover & position:absolute)

Question

There is known problem with border radius and child elements. Child elements protrude from rounded corners of parent.

Common solution is to add overflow:hidden to parent element. But it still doesn't work when parent have position:absolute.

http://jsfiddle.net/Xhrx8/2/

Answer 1

HTML

 <div id="items">
<div id="top">One</div>
<div>Two</div>
<div>Three</div>
<div id="bottom">Four</div>

CSS

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}

 #items div {
border-bottom: 1px solid black;
padding: 5px;
}

#items #top:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #ccc;
}
#items div:hover{
background-color: #ccc;
}
#items #bottom:hover {
background-color: #ccc;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
 }

Live Example http://jsfiddle.net/Xhrx8/3/