Openlayer map with rounded corners

Question

I integrate my openlayer map in a div with rounded corners. How can I get the map to have rounded corners? I have tried to apply border-radius to many divs in developer tools but the map refuses to get rounded corners.

Alex

Answer 1

This worked for me;

JS Fiddle

#demoMap
{
    position: relative;        
    width: 200px;
    height: 200px;
    left: 20px;
    top: 20px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1px solid black;
    overflow: hidden;
}

I think you probably just needed to add

overlfow: hidden;

to your CSS style, as the openlayers API just uses your div as a placeholder for it to insert many more elements.

Update

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.