is there a way to create a wavy border radius for a div, and what is the best way to use an image background – Photoshop

I am trying to make a wavy border for a div like the image I attached

I have tried to slice it and put it as an image background

  #section-2{
      background-image: url(../images/section-2bg.png);
      background-repeat: no-repeat;
      /* Full height */
      height: 100%;
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

and this is the HTML

  <section id="section-2" class="section-prod-comparison">
            <div class="row">
                <div class="col-lg-6">
                 <div class="col-lg-6"></div>
                </div>
            </div>
  </section>

but the image did not fit the screen and I could not customize it to follow the design
here is the result

is there any way to make it using CSS ??
or I only have to use the image as a background , so how to make the image background just like the design and responsive as well

thank you