Мне часто задают вопрос: можно ли создавать тени из градиентов вместо сплошных цветов? Не существует конкретного свойства CSS, которое делает это (поверьте мне, я смотрел), и любой пост в блоге, который вы найдете об этом, в основном представляет собой множество трюков CSS для аппроксимации градиента. На самом деле мы рассмотрим некоторые из них по ходу дела. Вместе мы раздвинем границы, чтобы получить решение, которое охватывает то, чего я не видел больше нигде: прозрачность. Большинство трюков...

Читайте начало статьи по ссылке. Добавление радиуса границы Если вы попытаетесь добавить border-radius к элементу при использовании непрозрачного решения, с которого мы начали, это будет довольно тривиальная задача. Все, что вам нужно сделать, это наследовать то же значение от основного элемента, и все готово. Даже если у вас нет радиуса границы, рекомендуется определить border-radius: inherit. Это учитывает любой потенциальный радиус границы, который вы, возможно, захотите добавить позже, или радиус границы, полученный откуда-то еще...