Apparently there is a bug in webkit, or so I’ve come to understand, that will cause Chrome to not hide the inner div’s contents when using border-radius.
Is there any decent way to do this? I’ve looked at using -webkit-mask-image, but using a radial gradient is just way too difficult to use as a work-around in this case.
I found an SVG that I stumped upon to get this going with -webkit-mask-image, but the SVG’s radius’s are not precise and therefore cuts off the corner a bit differently.
You can see the issue [in this pen](http://codepen.io/gurnzbot/pen/lebos “in this pen”)
Open it in Chrome, then Firefox. FF has nice rounded corners. Chrome is squared.
If anyone can help, that would be great!!!