How to put border-radius on an iframe maps?

Question

How to put border-radius on an iframe maps?

Navigation

#1 by (1 votes)

1

I have an iframe with the google map I wanted to put a border-radius to get rounded corners I tried border-radius but did not give any suggestions how can I do this?

html css

asked by anonymous 27.02.2015 / 23:27

1 answer

Problems using the switch in JS Svg contained in DIV does not follow "max-height: 100%"

score 1 · Answer 1

Just use border-radius same, but in span outside the iframe:

HTML:

<span id="mapa">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12242.306455925878!2d-75.12138282383809!3d39.90611059880662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e48fdca1ebac4d0!2sWalt+Whitman+Bridge!5e0!3m2!1sen!2sin!4v1395728987250"width="300" height="200" frameborder="0" style="border:0"></iframe>
</span>

CSS:

#mapa {
    position: absolute;
    width: 300px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

This should work. If you still do not have rounded corners, it may be a question of browser compatibility for border-radius property, try adding the following:

#mapa {
    position: absolute;
    width: 300px;
    height: 200px;
    border-radius: 50%; /* CSS3 */
    -moz-border-radius: 10px; /* Firefox */  
    -webkit-border-radius: 10px; /* Safari, Chrome */
    overflow: hidden;
}