How can i replicate this corner-border-radius trick to an image in my project

I have been seeing this type of border-radius but i dont know how to do it, please help

I have tried to effect changes directly to the top-left and bottom-right corners of the image using border-radius but it still doesnt work

CSS:

.img-section {
    flex: 1;
    padding: 40px;
    position: relative;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px
}

.img-form img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Solution 1: Use css clip-path:

HTML:

<img class="clip-svg" src="https://placecats.com/300/400" alt="Cat" />
<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <path
        d="M276 20C276 8.95431 267.046 0 256 0H45C36.7157 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 36.7157 0 45V301C0 312.046 8.9543 321 20 321H231C239.284 321 246 314.284 246 306C246 297.716 252.716 291 261 291C269.284 291 276 284.284 276 276V20Z"
        fill="#D9D9D9"
      />
    </clipPath>
  </defs>
</svg>

CSS:

.clip-svg { clip-path: url(#myClip);}

Solution 2: overlay your corners with svg shapes in the color of your background:

HTML:

<div class="wrapper">
  <img src="https://placecats.com/300/400" alt="Cat" />
  <svg
    class="shape-bottom-left"
    width="40"
    height="40"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M0 0V40H40C34.4771 40 30 35.5228 30 30V20C30 14.4772 25.5229 10 20 10H10C4.47714 10 0 5.52284 0 0Z"
      fill="white"
    />
  </svg>

  <svg
    class="shape-top-right"
    width="40"
    height="40"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M0 0V40H40C34.4771 40 30 35.5228 30 30V20C30 14.4772 25.5229 10 20 10H10C4.47714 10 0 5.52284 0 0Z"
      fill="white"
    />
  </svg>
</div>

CSS:

.wrapper {
  position: relative;
}

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.shape-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.shape-top-right {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(180deg);
}