CSS border-radius contain inner elements as well

I have two panel with border-radius properties applied to it. Both panels have elements inside them with there own background colours and borders. Both panels are scrollable. In the case of the first panel as the div is scrolled the background colours and borders accept the border radius of the container as the edge, whereas in the second panel the borders and background colours of the inner elements overlap the corners with their straight edges. Why?

The behaving panel ::

#coursepack .corecol .extention .dirpanel {
    background-color:#222;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    height:322px;
    width:304px;
    border:1px solid #AAA;
    overflow:hidden;
}

The misbehaving panel ::

#coursepanel .opsextention {
    position:absolute;
    width:320px;
    height:410px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    z-index:2;
    opacity:0.80;
    left:358px;
    top:20px;
    background-color:#222;
  -webkit-box-shadow: 0px 0px 10px #FF开发者_JAVA百科F;
  -moz-box-shadow: 0px 0px 10px #FFF;
  box-shadow: 0px 0px 10px #FFF;
  overflow:hidden;
}

Solve a Fiddle http://jsfiddle.net/3V8T8/5/ notice the borders penetrating the corners

Here is a fiddle showing both. The second one shows working rounded corners, but I see not what the difference is http://jsfiddle.net/3V8T8/10/

Remove the height and line height from the .opsextention .teetime class then use padding:10px 25px 10px 25px to space it out and that grey line does not go outside the corner