Можно ли сделать на css что бы границы в разные стороны были выгнуты?

body { 
  background: red; 
  margin: 0; 
} 
 
.block { 
  display: block; 
  min-width: ; 
  width: 50%; 
  height: 100vh; 
  position: fixed; 
  left: 0; top: 0; bottom: 0; 
} 
 
.block::after { 
  content: ''; 
  display: block; 
  clear: both; 
} 
 
.left, .content, .right { 
  display: inline-block; 
  height: 100vh; 
  float: left; 
} 
 
.left, .right { 
  width: 50px; 
  background-repeat: no-repeat; 
  background-position: center center; 
  background-size: 100% 100%; 
} 
 
.content { 
  width: calc(100% - 100px); 
  background: #fff; 
  padding: 10px; 
  box-sizing: border-box; 
} 
 
.left { 
  background-image: url('https://i.stack.imgur.com/q7pRP.png'); 
} 
 
.right { 
  background-image: url('https://i.stack.imgur.com/Pzvnn.png'); 
}

<div class="block"> 
  <div class="left"></div> 
  <div class="content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper, turpis vitae semper malesuada, mauris nisi interdum neque, ut ultrices lectus quam quis nibh. 
  </div> 
  <div class="right"></div> 
</div>