Top and Bottom bent borders

Question

I'm looking for a way to create bent top and bottom borders like the div in this image. I've tried some ways mentioned here but it depends on using white divs with border-radius on top of the main div but as you can see in this image it should be transparent to display the background image.

Answer 1

This is possible using svg.

For responsiveness remove the svg's width and height attributes, add viewBox="0 0 400 150" then try changing #image's width and height, the svg will respond to its width and height.

Demo on Fiddle demonstrating responsive shape.

^{Browser support for this approach - This will work on all browsers but IE8.}

body {
  background: teal;
}
#image {
  width: 600px;
  height: 300px;
  position: relative;
  background: url(http://lorempixel.com/600/300);
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="image">
  <svg width="400" height="150">
    <path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
  </svg>
</div>