The upper and lower borders are bent

Question

I am looking for a way to create curved upper and lower borders, such as divin this image. I tried several methods mentioned here, but it depends on the use of white divwith border-radiusover the main one div, but, as you can see in this image, it must be transparent to display the background image.

Answer 1

This is possible with svg.

For responsiveness, remove the attributes svg widthand heightadd viewBox="0 0 400 150", then try changing #image widthand height, svgwill respond to widthand height.

, .

^{- , 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>

Hide result

Answer 2

, , .

, chipChocolate ,

.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;
}

, , , . , .

.

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>

Hide result

Answer 3

div, 2 , border-radius box-shadows:

div {
  width: 70%; height: 150px;
  margin: 20px auto;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.5;
}
div:before,div:after {
  content: '';
  position: absolute;
  height: 100%; width: 300%;
  left: -100%;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 140px red;
}
div:before {top: -146px;}
div:after {bottom: -146px;}


body {background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size: cover;}

<div></div>

Hide result

Answer 4

CSS , , PNG, Photoshop, Google .., , -.

, Adobe UI , - CSS, , , (, ).