Как можно реализовать подобную рамку вместе со свойством border-radius? То что должно получиться: https://i.imgur.com/y8kksG1.png
.map {
width: 100%;
max-width: 900px;
position: relative;
border-radius: 100px 0px;
overflow: hidden;
}
.map:before,
.map:after,
.map-wrap:before,
.map-wrap:after {
content: '';
position: absolute;
display: block;
background-color: rgba(234, 234, 234, 0.6);
}
.map:before,
.map:after {
width: 10px;
top: 0;
bottom: 0;
}
.map:after {
right: 0;
}
.map-wrap:before,
.map-wrap:after {
height: 10px;
left: 10px;
right: 10px;
}
.map-wrap:after {
bottom: 0;
}
.map iframe {
display: block;
}
<div class="map">
<div class="map-wrap">
<iframe src="https://yandex.ru/map-widget/v1/-/CCUjn-VQkC" width="100%" height="345" frameborder="0" allowfullscreen="true"></iframe>
</div>
</div>