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.

Answer 1

If the box has known and fixed size, you can fake it with one pseudo-element and box-shadow, and even draw curved borders :

DEMO HTML :

  
another single div shaped


  
another single div shaped

CSS:

.scoop {
  position:relative;
  height:200px;
  width:200px;
  overflow:hidden;
}
body {
  background:#F3F3F3;/* color reused in pseudo element */
}
.scoop:before{
  content:'';
  position:absolute;
  left:0;
  margin:-20px;
  height:40px;
  width:40px;
  border-radius:100%;
  background:#F3F3F3;
  box-shadow:200px 0 0 #F3F3F3,
    0 200px 0 #F3F3F3,
    200px 200px 0 #F3F3F3,
    0 0 0 500px #2798DE;/* here we draw background-color of parent */
}

div > * {
  margin:auto;
  position:relative;/* to draw on top of shadowed pseudo element */
}

and to draw borders as well , let's add some extra shadows:

div.border {
  box-shadow:
    23px  0 0 -20px,/* 23px =>(towards right) width of pseudo seen + fakeborder width 0 0 -20px => reduce size shadow of 20px */ 
    -23px  0 0 -20px,
    0  23px  0 -20px,
    0  -23px  0 -20px;
}
div.border:before {
  box-shadow: 
    0 0 0 3px,/* draw 3px unblured shadow */
    200px 0 0 #F3F3F3,/* mask of main background-color */ 
   200px 0 0 3px ,
    0 200px 0 #F3F3F3,
    0 200px 0 3px,
    200px 200px 0 #F3F3F3,
    200px 200px 0 3px,
    0 0 0 500px #2798DE;
}