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!!!
Dumb question, but have you tried :
Even dumber question if you’d have looked at the Pen ;) It’s weird, setting border-radius on map too helps some, but only on the right side.
lol @ CrocoDillon
Yes I definitely tried things that seem obvious, but I was hoping a work-around was being done by others for this particular issue.
Luckily in this case it was decided that squaring things off is ok, but if anyone ever finds a workaround for this issue please let us know! :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".