CODEWITHSUNDEEP
htmlcssgoogle-maps
E. Shock
E. Shock

Reputation: 95

Embedded Google map with border-image property?

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, i.e., 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?

Upvotes: 0

Views: 1207

Answers (1)

user7207170
user7207170

Reputation:

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>

Upvotes: 1

Related Questions