CSS border-radius也包含内部元素

Question

我有两个应用了边界半径属性的面板。两个面板都有各自的背景色和边框元素。两个面板都是可滚动的。在滚动div的第一个面板中，背景颜色和边框接受容器的边框半径作为边缘，而在第二个面板中，内部元素的边框和背景颜色与边角的直线边缘重叠。为什么？

行为面板:：

#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;
}

行为不端小组:：

#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 #FFF;
  -moz-box-shadow: 0px 0px 10px #FFF;
  box-shadow: 0px 0px 10px #FFF;
  overflow:hidden;
}

解决一个小提琴http://jsfiddle.net/3V8T8/5/注意边框穿透边角

这是一把显示两者的小提琴。第二个显示了工作圆角，但我看不出http://jsfiddle.net/3V8T8/10/有什么区别

Answer 1

从.opsextention .teetime类中删除高度和线条高度，然后使用padding:10px 25px 10px 25px将其隔开，这条灰色线条不会超出边角