滚动元素上的border-radius

Question

当你有一个带有边界半径的可滚动div时，孩子们会使用eclipse或者不尊重这个边界半径。例如下面是该问题的一个小提琴：

http://jsfiddle.net/Thatguyhampton/E9dmr/2/

.scrollable { 
    overflow: auto; 
    overflow-y: overlay; 
    -webkit-overflow-scrolling: touch; 
    -webkit-transform: translate3d(0, 0, 0); 
    height: 400px; 
    width: 200px; 
    background-color: blue; 
    border-radius : .5em; 
} 

.content { 
    height: 500px; 
    width: 200px; 
} 

.content-top { 
    position :absolute; 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
} 

红色区域显示尖角，而不是圆形的人父。有没有办法解决？

Answer 1

DEMO JS FIDDLE

.content-top { 
    /*position :absolute;*/ 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
} 

注出 '的位置是：绝对' 的。内容顶元件上解决该问题。

Answer 2

Fixed DEMO Example

红色元素没有边界半径和走在盘旋半径滚动元素（蓝色）。边界半径不会裁剪！ （仅边框半径）

解决问题： 您可以将红色元素的border-radius添加到左上角。

.content-top { 
    border-top-left-radius : .5em; 
} 

Answer 3

改变这一行这样DEMO：

.content-top { 
    position :absolute; 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
    -webkit-border-top-left-radius: 3px; 
-webkit-border-top-right-radius: 3px; 
-moz-border-radius-topleft: 3px; 
-moz-border-radius-topright: 3px; 
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 
} 

Answer 4

.scrollable { 
    overflow: auto; 
    overflow-y: overlay; 
    -webkit-overflow-scrolling: touch; 
    -webkit-transform: translate3d(0, 0, 0); 
    height: 400px; 
    width: 200px; 
    background-color: blue; 
    border-radius : .5em; 
} 

.content { 
    height: 400px; 
    width: 200px; 
} 

.content-top { 
    /*position :absolute;*/ 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
}