CSS:Как сделать "выгиб внутрь"

[SeregaNv]

Как сделать "выгиб внутрь" линий вот такой для блочного элемента (как на скриншоте ниже)?
С помощью iframe#video { transform: skew(5deg); } можно сделать наклон, но вот выгнуть линии как так можно? Есть идеи?

В инете нашел только дико костыльный способ путём добавления перекрывающих div с каждой из 4-х сторон (ну должно же, елки-палки, быть более элегантное решение), вот перекрытие с одной стороны:

<div class="parent">
<div class="block">
</div>
</div>

.parent{
position:relative;
margin:0 auto;
width:400px;
height:200px;
background:rgb(20, 31, 41);
overflow:hidden;

}

.block{
text-align:center;
position:absolute;
width:102%;
height:40px;
background:white;
bottom:-18px;
left:-1%;
border-radius:50%;
}

[Black_Star]

Я бы делал маской
http://htmlbook.ru/blog/maskirovanie-v-css
http://bennettfeely.com/clippy/
ни каких добавочных элементов и искажений, которые нагружалуют проц.

[SeregaNv]

спасибо, вот так
-webkit-clip-path: polygon(43% 5%, 87% 8%, 91% 45%, 94% 67%, 100% 100%, 63% 93%, 37% 90%, 12% 86%, 6% 36%, 0 0);
clip-path: polygon(43% 5%, 87% 8%, 91% 45%, 94% 67%, 100% 100%, 63% 93%, 37% 90%, 12% 86%, 6% 36%, 0 0);

удалось сделать

а как border поставить (чтоб border такой же выгнутый, как в примере), ну сейчас просто обрезается border этим трафаретом?

[Black_Star]

Можешь сделать бордер через :before и оформить его ка подложку через position:absolute z-index:-1 (ну или просто блоку с видио задать больше z-index) а кэтой подложке применить такую же маску. Единственные минус, там не всё так гладко с поддержкой свойства clip-path по браузерам