Grow your CSS skills. Land your dream job.

Google Map with transparent rounded corners in Chrome

  • # March 28, 2013 at 4:04 pm

    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!!!

    # April 3, 2013 at 2:15 am

    Dumb question, but have you tried :
    overflow:hidden ?

    # April 3, 2013 at 4:56 am

    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.

    # April 3, 2013 at 9:14 am

    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! :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".