Curve inside image with css

Question

Is it possible and how can i make a curve inside a image top and bottom, see image. How can i achieve this with css?

Answer 1

Set your image as a background-image on a div and use this technique. I've used a solid red colour in my example.

Here i used pseudo elements to create the curves on the top and bottom. Notice the top and bottom offset is half of that of the height of each pseudo element and the border radius is set to 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 ;
}

<div></div>