带有边框图像属性的嵌入式Google地图？

Question

JS Fiddle

<div class="banner">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13004077.93320049!2d-104.65674178116879!3d37.27560719446957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1513191558069" width="500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

.banner {
border-style: solid;
border-width: 20px 20px 20px 20px;
border-image: url(https://i.imgur.com/5OgMQoX.png) 35 35 35 35;
height: 500px;
width: 500px;
position: relative;
overflow: hidden;

}

I would like the map to actually fill the border div, ie, reach to the edges of the border image, with the corners rounded so they don't peek through to the other side of the border. Is this something that is even possible?

Answer 1

It actually depends on the image and since the border-image you have used is not really rectangular that's why there are gaps between the edges of the iframe and the border-image but I tried to tweak the values around to get it as close as I could get. Hope, this helps.

 .banner { border-style: solid; border-image: url(https://i.imgur.com/5OgMQoX.png) 20 35 25 35; border-width: 20px 20px 20px 20px; height: 500px; width: 500px; position: relative; overflow: hidden; padding: 0; } .banner iframe { position: absolute; width: 100%; height: 100%; } 

 <div class="banner"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13004077.93320049!2d-104.65674178116879!3d37.27560719446957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1513191558069" width="500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe> </div>