Maps 向地图添加边界半径

我有一个网站运行在一个叫做Ushahidi的地图平台上。默认的模板是非常长方形的，所以我在摆弄CSS，并使用边界半径对所有内容进行舍入

它有助于其他元素，但地图是这样一个正方形，它不会放松

这可能是不可能的，我想知道这里是否有人有过这样的经历。使用inspect元素和view源的html是不同的。不确定这到底意味着什么，但猜测html是由地图提供商拉入的

以下是查看源上的html：

<div class="map " id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
    <div id="mapScale"></div>
    <div id="mapMousePosition"></div>
    <div id="mapProjection"></div>
    <div id="mapOutput"></div>
</div>

我还添加了一个inspect元素HTML的屏幕。看起来它使用的是“开放层”。我听说过，但不完全明白发生了什么

可以把我的地图的边缘弄圆吗？以下是有帮助的网站：

---

将

边界半径应用于两层

CSS

div.map {
    border: #999 1px solid;
    width: 800px;
    height: 366px;
    position: relative;
    height: 650px;
    border-radius: 25px;      /* ADD THIS */
}

#OpenLayers_Map_11_OpenLayers_ViewPort {
    border-radius: 25px;      /* ADD THIS */
}

它起作用了。使用任意数量的像素。我使用了
25px
我建议使用更通用、更安全的CSS选择器（因为ID
OpenLayers\u Map\u 11\u OpenLayers\u ViewPort
是由OpenLayers生成的，它的值是不可预测的；而OL2.12和更早版本会生成包含点的ID，因此不适合CSS选择器）：

.olMap, .olMapViewport {
    border-radius: 25px;
}