Как сделать такое внутреннее скругление волной у блока средствами css?

Для создания внутреннего скругления волной у блока средствами CSS можно использовать свойство border-image.

Первым шагом необходимо создать изображение, которое будет представлять волну. Это может быть любое изображение, но лучше использовать простое черно-белое изображение с волнами. Допустим, мы создали изображение и сохраняем его в файл под названием wave.png.

Затем можно приступить к применению нашего изображения в качестве фона блока с помощью свойства border-image.

Вот пример кода:

.block {
  width: 300px;
  height: 200px;
  border-width: 20px;
  border-image-source: url(wave.png);
  border-image-slice: 1;
  border-image-width: 20px;
  border-image-repeat: round;
}

В данном примере мы создаем блок с размерами 300px на 200px и устанавливаем толщину границы равной 20px. Затем мы указываем путь к нашему изображению в свойстве border-image-source. Далее, мы указываем border-image-slice: 1;, чтобы указать, что граница имеет только одну секцию, поскольку мы хотим направить волну по внутренней части блока. Затем мы устанавливаем толщину границы изображения равной 20px, чтобы совпадать с толщиной границы блока. Наконец, мы указываем border-image-repeat: round;, чтобы изображение повторялось внутри блока с помощью волнистых ребер.

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

Обратите внимание, что поддержка свойства border-image может быть ограничена в некоторых старых браузерах, поэтому рекомендуется проверить совместимость в целевых браузерах. Также учтите, что изображение wave.png должно быть доступно по указанному пути.