Css 如何"；削减；根据div的边界半径的元素

我有这张图片的代码：

CSS：

<section class="content" id="contentContact">
    <div id="map"></div>
    <form id="contactForm" /></form>
</section>

section.content{
最小高度：500px；
宽度：73%；
浮动：对；
边缘底部：0px；
填充物：5px；
背景：白色；
-webkit边框左上半径：100px；
-webkit边框右下半径：100px；
-左上角moz边界半径：100px；
-moz边框半径右下角：100px；
边框左上半径：100px；
边框右下半径：100px；
-webkit盒阴影：0px 0px 18px rgba（50,50,50,0.79）；
-moz盒阴影：0px 0px 18px rgba（50,50,50,0.79）；
盒影：0px 0px 18px rgba（50,50,50,0.79）；
}
#地图{
宽度：100%；
高度：200px；
边缘顶部：15px；
背景：#F6F6F6；
边界半径：4px；
}

HTML：

<section class="content" id="contentContact">
    <div id="map"></div>
    <form id="contactForm" /></form>
</section>

然后，我希望根据div的边界半径而不是div之外的半径来“剪切”元素。

---

我希望我已经解释过了！谢谢

只需将其添加到CSS中，用于具有圆角的外部div或父div

overflow:hidden

对于谷歌地图来说，这并不容易

请看几个不同的选项：

---

将

边框半径设置为
iframe
元素

以下是为所有内部元素（子元素）制作css中的一个示例：

或者任何不透明度<1。
不确定问题是什么，但通常google maps会呈现为iframe，因此您要对地图执行的任何操作都可能必须执行#map iframe作为css选择器。