Curva dentro de la imagen con css

Es posible y cómo puedo hacer una curva dentro de una imagen arriba y abajo, ver imagen. ¿Cómo puedo lograr esto con CSS?

enter image description here

Establezca su imagen como una imagen de fondo en un div y use esta técnica. He usado un color rojo sólido en mi ejemplo.

Aquí usé pseudoelementos para crear las curvas en la parte superior e inferior. Observe que el desplazamiento superior e inferior es la mitad de la altura de cada pseudo elemento y el radio del borde se establece en 50%.

div { width:500px; height:200px; background:red; position:relative; overflow:hidden; } div:after, div:before { content:''; background:white; position:absolute; top:-10px; left:0; width:100%; height:20px; border-radius:0 0 50% 50%; } div:after { top:auto; bottom:-10px; border-radius:50% 50% 0 0 ; }