strider8

How to show a map with Rounded corners in Google Chrome?

Discussion created by strider8 on May 16, 2013
Latest reply on May 17, 2013 by vinaybansal
I've been trying to style my JSAPI web application to have a map with rounded corners. I have been trying to do this with plain CSS, and am currently using the following code:

#map{
 border: 6px solid blue;
    border-radius: 30px 30px 30px 30px;
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    margin: 45px 10px 10px;
    position: absolute;
    right: 0;
    top: 0;
    background-color:#eee;
}


This works great in Firefox, but in Chrome, the tiles from the layers are not clipped by the rounded corners. This is a known defect with Chrome. I was wondering if someone has managed to find a work around for this.

If nothing else works, I can always use images for the rounded corners, but I'll like a plain CSS solution if possible.

Outcomes