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>

Answer 2

Another posibility, not using clipping but multiple backgrounds.

Technically less advanced than chipChocolate answer, just providing an alternative

.test {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 400px;
    height: 100px;
    border-radius: 10px;
    background-image: radial-gradient(circle at center -778px, 
        transparent 800px, rgba(255,0,0,0.4) 800px),
        radial-gradient(circle at center 828px, 
        transparent 800px, rgba(255,0,0,0.4) 800px);
    background-position: center top, center bottom;
    background-size: 100% 50%, 100% 50%;
    background-repeat: no-repeat;
}

Thw idea is to divide the element in 2 halves, and then set in each a radial gradient that matches the corners position. The final posiotion of the gradients adjusted by hand.

Can de done responsively also.

demo

body {
    width: 100%;
    height: 100%;
background: url(http://placekitten.com/g/600/300);
}

.test {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 400px;
    height: 100px;
    border-radius: 10px;
    background-image: radial-gradient(circle at center -778px, 
        transparent 800px, rgba(255,0,0,0.4) 801px),
        radial-gradient(circle at center 828px, 
        transparent 800px, rgba(255,0,0,0.4) 801px);
    background-position: center top, center bottom;
    background-size: 100% 50%, 100% 50%;
    background-repeat: no-repeat;
}

<div class="test"></div>