html - Border corner shape scoop doesn't work

Question

I want to achieve the below shape using border-corner-shape property. But it doesn't work.

My code is available below:

.left-1 {
   background-color: #3498DB;
   border-corner-shape: scoop;
   border-radius: 30px;
   width: 200px;
   height: 200px;
}

<div class="left-1"></div>

Answer 1

Using Radial Gradients:

Here is another alternative method to achieve the border corner scoop effect using radial gradients. In this method, we use multiple radial gradients and position them at the corners.

.border-scoop {
  height: 300px;
  width: 300px;
  background: -webkit-radial-gradient(0% 100%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(0% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 100%, circle, transparent 15%, steelblue 15%) no-repeat;
  background: radial-gradient(circle at 0% 100%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 0% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 100%, transparent 15%, steelblue 15%) no-repeat;
  background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
  background-size: 75% 75%;
}
body {
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="border-scoop"></div>