border-radius on a scrolling element

Question

When you have a scrollable div with a border-radius the children divs eclipse or do not respect this border radius. For instance here is a fiddle showing the problem :

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

The red area is showing sharp corners instead of the rounded ones of the parent. Is there any way around this?

Answer 1

DEMO JS FIDDLE

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

Commenting out 'position: absolute' on the .content-top element fixes the problem.

Answer 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: 400px;
    width: 200px;
}

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

Answer 3

Fixed DEMO Example

The red element doesn't have border-radius and go hover the scrollable radius element(the blue one). the border radius doesn't make cropping! (only border radius)

for fixing the issue: you can add the red element the border-radius to the top left corner.

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