# Google Maps Corner Radius

**URL:** <https://forum.wixstudio.com/t/google-maps-corner-radius/1659>\
**Category:** Ask the community\
**Tags:** design\
**Created:** [December 6, 2021, 11:23pm UTC](https://forum.wixstudio.com/t/google-maps-corner-radius/1659 "2021-12-06T23:23:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexjameswood00](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alexjameswood00/32/8861_2.png) [@alexjameswood00](https://forum.wixstudio.com/u/alexjameswood00)\
**Post date:** [December 6, 2021, 11:23pm UTC](https://forum.wixstudio.com/t/google-maps-corner-radius/1659/1 "2021-12-06T23:23:41Z")

</div>

Does anyone know a solution to make the Google Maps feature have a corner radius? It is throwing off my design and would really help - thank you 🙏

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [December 7, 2021, 10:31am UTC](https://forum.wixstudio.com/t/google-maps-corner-radius/1659/2 "2021-12-07T10:31:57Z")

</div>

Instead of using the Google Map element, you can embed a Google Map in an HtmlComponent and add the border-radius property to the script.

Use the Google Maps example. The first line in the script , should be modified like this:

```javascript
<div id="map" style="height: 100%; width: 100%;border-radius: 10px;" />

```

You will need to pass the location to the script, but the map border will be curved, and you will have many more map and design options available.

Keep in mind that you will need an API key from Google.

---

<div class="post-metadata">

**Author:** ![alexjameswood00](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alexjameswood00/32/8861_2.png) [@alexjameswood00](https://forum.wixstudio.com/u/alexjameswood00)\
**Post date:** [December 7, 2021, 12:22pm UTC](https://forum.wixstudio.com/t/google-maps-corner-radius/1659/3 "2021-12-07T12:22:14Z")

</div>

Thank you so much Yisrael, I’ll try this later and I’ll let you know how I get on! Have a great day 😊

---

<div class="post-metadata">

**Author:** ![Jordan\_Bright](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jordan_bright/32/107175_2.png) [@Jordan\_Bright](https://forum.wixstudio.com/u/Jordan_Bright)\
**Post date:** [January 27, 2026, 2:38pm UTC](https://forum.wixstudio.com/t/google-maps-corner-radius/1659/4 "2026-01-27T14:38:50Z")

</div>

Another option is to put the map into a container, set the corner radius in the container and make sure that overflow content is set to hide.