Андрей Федоров

код бы выложили на codepen что ли , это вроде не сложно но не ясно что Вы имеете ввиду

можете попробовать https://webref.ru/css/function/radial-gradient радиальный градиент, тогда не надо будет 5 слоев

Например так

.img-holder{
  width: 370px;
  border: 1px solid black;
  overflow: hidden;
  font-size: 0;
  height: inheigt;
  position: relative;
}

.img-holder img{
  position: absolute;
  min-width: 370px;
  height: 100%;
  top: 0;
}

Используйте

table tr td:last-child {border-radius: 0 10px 10px 0}
table tr td:first-child {border-radius: 10px 0 0 10px}

Можно так
https://jsfiddle.net/soledar10/r1wr1bgk/

Наверное потому что они не хотят тянуть библиотеку в 70к кода для какой- то мелочи.

К примеру вам нужно разместить текст на пестром фоне. Тень будет выступать в качестве обводки, и все буквы будут читабильны как на светлых, так и на темных участках фона.
Еще много может быть причин - что дизайнеру в голову взбредет

добавьте элементы :before и :after для .class:hover, а для них - background

Пример
Используем псевдоэлементы и трансформацию.
Простые углы реализуем за счёт рамки. Однако, если потребуется тень, придётся и там применить трансформацию.
Для сложных углов вводим вложенный элемент и используем внутреннюю тень.
И, конечно же, всегда есть вариант с использованием SVG в качестве фона (или напрямую).