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

Question

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.

VinayBansal · Answer

I am  getting this when I am setting border-radius 30px
Try removing position:absolute from map style.

Rounded_Image.PNG

DevdattaTengshe1 · Answer

Which version of google chrome are you using. Since i am getting rounded corners with these 2 css.
My google chrome version is Version 26.0.1410.64 m

I'm using the same version of Google Chrome.
You are not noticing the problem, because the radius is too small to make it noticeable. But it is still observable, when you look at it in detail.

See the corner of the map in Google Chrome with 6 pixel. You will see that the boundary has a rounded corner, while the map itself (by that I mean the tiles/images ect) do not have a rounded corner:
[ATTACH=CONFIG]24411[/ATTACH]

Now compare this to the behavior in Mozilla Firefox, when border-radius is set to the same value. Here the map itself(image/tile), as well as the boundary, both have rounded corners:
[ATTACH=CONFIG]24412[/ATTACH]

To clearly see the issue, change the border radius to 30 px, using the following: -webkit-border-radius: 30px;

You will see the following:
[ATTACH=CONFIG]24413[/ATTACH]

mapround-8.png

mapround-30.png

mapround-8-firefox.png

VinayBansal · Answer

Try this-webkit-border-radius: 6px;
-webkit-box-shadow: 8px 8px 16px #323834;

Which version of google chrome are you using. Since i am getting rounded corners with these 2 css.
My google chrome version is Version 26.0.1410.64 m