<div class="block">
  <ul>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla et cumque dicta reiciendis ullam. Soluta, in fugit nemo distinctio eum laudantium delectus cupiditate autem omnis qui minima ducimus optio eius.</li>
    <li>Consequatur ut aliquid fuga dignissimos ducimus, autem, temporibus ullam soluta id rem, perferendis quo molestias.</li>
    <li>Aut eligendi perferendis doloremque error explicabo ad facilis dicta in inventore repellat ab vitae rem, quaerat ducimus aspernatur dolores maiores, aperiam delectus.</li>
    <li>Et nulla aliquid cum quia enim accusamus animi optio delectus nesciunt, doloribus nisi veniam odit autem distinctio totam impedit, cupiditate adipisci corrupti?</li>
    <li>Consequuntur unde, repudiandae provident ipsam labore facilis delectus natus eius. Sed laudantium sequi modi voluptas cumque sint temporibus obcaecati non optio minus.</li>
  </ul>
</div>

*, *::before {
  box-sizing: border-box;
}

.block {
  position: relative;
  width: 75%;
  margin: 40px auto;
  border: 110px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1050' height='520'%3E%3Cpolyline points='-1 78 36 46 70.81 46 106 1 980 1 1049 46 1049 450 981 519 106 519 72 486 37 486 -1 452' fill='none' stroke='red' stroke-width='2'/%3E%3C/svg%3E") 110;
  z-index: 0;
}

.block::before {
  content: '';
  position: absolute;
  top: -135px;
  left: -120px;
  bottom: -135px;
  right: -120px;
  border: 110px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1050' height='520'%3E%3Cpolyline points='57.5 42.5 88.5 0.5 968.5 0.5 1049.5 51.5 1049.5 152.5' fill='none' stroke='blue' stroke-miterlimit='10'/%3E%3C/svg%3E") 110;
  z-index: -1;
}

.block > ul {
  margin: -60px -30px;
}