Curve inside image using css

Question

Is it possible and how to make a curve inside the image above and below, 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. In my example, I used solid red.

Here I used pseudo elements to create curves above and below. Note that the top and bottom offsets are half the height of each pseudo-element, and the border radius is 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>

Run codeHide result