Реализация сложных углов рамки

body { 
  margin: 0; 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
div { 
  height: 400px; 
  width: 300px; 
   
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
} 
 
div::before, 
div::after { 
  content: ''; 
  position: absolute; 
  background-image: url(https://picsum.photos/300/400); 
  background-position: center center; 
} 
 
div::before { 
  height: 100%; 
  width: 100%; 
  clip-path: polygon(0 15%, 20% 15%, 20% 0, 80% 0, 80% 15%, 100% 15%, 100% 85%, 80% 85%, 80% 100%, 20% 100%, 20% 85%, 0 85%); 
} 
 
div::after { 
  width: 90%; 
  height: 90%; 
  border-radius: 10% / 13%; 
}

<div> 
</div>

.container { 
  position: relative; 
  width: 270px; 
  height: 300px; 
  overflow: hidden; 
} 
 
.container div { 
  background: url('https://cdn.steemitimages.com/DQmPgK575YnZP6uWG3iDMqPicEqrrwgVgSGTPmo1SqSpxS8/3402463-KNVHBTVS-7.jpg'); 
  background-size: cover; 
} 
 
.one, 
.two, 
.three { 
  background: gray; 
  border: 0px solid orange; 
} 
 
.one { 
  width: 150px; 
  height: 100%; 
  margin-left: 60px; 
  float: left; 
  z-index: 1; 
} 
 
.two { 
  width: 221px; 
  height: 80%; 
  margin-top: 30px; 
  margin-bottom: 30px; 
  margin-left: -190px; 
  float: left; 
  z-index: 2; 
} 
 
.three { 
  position: absolute; 
  width: 193px; 
  height: 93%; 
  margin-top: 9px; 
  margin-bottom: 9px; 
  margin-left: 35px; 
  border-radius: 18px; 
  z-index: 5; 
}

<div class="container"> 
  <div class="one"></div> 
  <div class="two"></div> 
  <div class="three"></div> 
</div>