How to place border-Radius on an iframe maps?

Asked

Viewed 1,177 times

1

I have an iframe with the google map I wanted to put a border-radius to get rounded corners tried border-radius but has not given any suggestion as to how I can do this?

html css
  • 1

    http://jsfiddle.net/56Vbp/ Here’s an example.... which came from that answer: http://stackoverflow.com/questions/24610093/giving-an-iframe-a-border-radius

  • This example had to do not get rounded corners

  • Put a div around the iframe as shown in the example?

  • yes but in this example if you notice the map does not get rounded corners

  • Here it is rounded... '.'

  • Here I haven’t seen yet

  • I know about the safari

  • Is that I tested on Chrome and firefox and were working perfectly...

  • yes I’ve seen that works me and that was on safari

  • mark the suggestion as a response

  • In short, directly in iframe seems not to work, you need to wrap it in a div with the border-radius (+ cross-browser variants, prefixed).

  • Well I’ve managed to resolve thanks for everyone’s help

  • I used -Webkit-border-Radius: 15px; for safari but it still doesn’t work for me

  • @Césarsousa for safari, try the following solution: http://stackoverflow.com/questions/17202128/rounded-cornes-border-radius-safari-issue

Show 9 more comments

1 answer

1

Just use the border-radius even, but in a span out of frame:

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. In case you don’t see the rounded corners yet, it may be a question of browser compatibility as to the property border-radius, tries to add 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;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.