How to make corners of openlayers with OSM map rounded?

Question

I'm trying to apply style with border-radius:XXpx to my openlayers map:

map = new OpenLayers.Map(name)
map.addLayer(new OpenLayers.Layer.OSM())

But rounded corners are hidden by tiles of the map: screenshot

Is there any way to resolve this?

UPD:

There are following styles applied to my div:

<div id="map"></div>

styles:

#map {
    border: solid 1px red;
    border-radius: 10px;
    overflow: hidden;
}

And overflow:hidden does not help

UPD 2

I can't make this code to work in Chrome (several versions)

Answer 1

Mozilla / Safari / IE

#map {
    border-radius: 10px;
    overflow: hidden;
}

Chrome

#map {
    border-radius: 10px;
    overflow: hidden;
}

#map div canvas{
    border-radius: 10px;
}

Answer 2

You could try to add both border-radius and overflow:hidden to your div element.

Answer 3

I found answer on Stackoverflow.

Short: This is a bug/feature of Chrome, in other browsers border-radius + overflow:hidden works nicely.

In detail (copypasted from Stackoverflow):

After reading the comment on Chrome I tried to get it working with Chrome but that does not seem to be possible after reading border-radius in Chrome bug? and CSS Border radius not trimming image on Webkit and using chromes dev tools to modify the element styles.