Совок формы угла границы не работает

Использование радиальных градиентов:

Вот еще один альтернативный метод достижения эффекта выемки на границе угла с помощью радиальных градиентов. В этом методе мы используем несколько радиальных градиентов и располагаем их по углам.

.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>

Использование пути обрезки:

Эффект закругленного угла границы также может быть достигнут с помощью clip-path. Чистая версия CSS поддерживает только основные формы (круг, многоугольник, эллипс и т. д.) и не поддерживает путь или комбинацию фигур, но можно использовать SVG (встроенный/внешний).

.border-scoop {
  width: 200px;
  height: 200px;
  background-color: #3498DB;
  -webkit-clip-path: url(#scoop);
  clip-path: url(#scoop);
}
body {
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='scoop' clipPathUnits='objectBoundingBox'>
      <path d='M0.2,0 A0.2,0.2 0 0,1 0,0.2 
                     L0,0.8 A0.2,0.2 0 0,1 0.2,1
                     L0.8,1 A0.2,0.2 0 0,1 1,0.8
                     L1,0.2 A0.2,0.2 0 0,1 0.8,0z' />
    </clipPath>
  </defs>
</svg>
<div class='border-scoop'></div>

Прозрачная область с Box Shadow:

Приведенный ниже фрагмент представляет собой вариант ответа GCyrillus, который нуждается в дополнительном элементе, но будет работать, даже если фон страницы не является сплошным цветом. Однако этот метод по-прежнему имеет то же фиксированное и известное ограничение размера, которое упоминается в другом ответе.

Следует отметить, что тень блока гораздо лучше поддерживается браузерами, чем радиальные градиенты.

.border-scoop{
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.inner{
  position: absolute;
  top: 0px; left: 0px;
  height: 100%;
  width: 100%;
}
.border-scoop:before, .border-scoop:after, .inner:after, .inner:before{
  position: absolute;
  content: '';
  height: 30%; width: 30%;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0px 0px 0px 210px steelblue;  
}
.border-scoop:before{
  top: -15%; left: 85%;
}
.border-scoop:after{
  top: -15%; left: -15%;
}
.inner:after{
  top: 85%; left: 85%;
}
.inner:before{
  top: 85%; left: -15%;
}

body{
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

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

Эта функция (border-corner-shape : curve | scoop | bevel | notch) еще не реализована (она является экспериментальной), поэтому она не применима ни в одном из существующих браузеров.

Если блок имеет известный и фиксированный размер, вы можете сымитировать его с помощью одного псевдоэлемента и box-shadow и даже нарисовать изогнутые границы:

ДЕМО HTML:

<div class="scoop">
  <p>another single div shaped</p>
</div>
<div class="scoop border">
  <p>another single div shaped</p>
</div>

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 */
}

и чтобы нарисовать границы, давайте добавим несколько дополнительных теней:

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;
}