title: border-radius on a scrolling element
body: <p>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 : </p>
  
  <p><a href="http://jsfiddle.net/Thatguyhampton/E9dmr/2/" rel="nofollow">http://jsfiddle.net/Thatguyhampton/E9dmr/2/</a></p>
  
  <pre><code> .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;
  }
  </code></pre>
  
  <p>The red area is showing sharp corners instead of the rounded ones of the parent. Is there any way around this?</p>