Как сделать border градиентом
Для этого используется свойство border-image со значением linear-gradient() и border-image-slice: 1. Предварительно нужно обязательно задать обычную границу указав толщину, стиль и преобладающий на градиенте цвет.
See the Pen Border градиентом by Websitio (@Websitio) on CodePen.
See the Pen zLWmqq by Websitio (@Websitio) on CodePen.
Закругленные уголки и border градиентом
К сожалению, в этом случае не получится обойтись простыми свойствами и нужно немножко помудрить. С помощью ::before сделать подложку с фоновым градиентом, а сверху сам div с фоном совпадающим с общим фоном.
See the Pen vaRVyd by Websitio (@Websitio) on CodePen.
Трюк с маской
Для этого решения мы также будем использовать псевдоэлемент и свойство mask для обрезки фона
Поддержка mask: https://caniuse.com/css-masks.
Установим фон элемента как градиент. А затем, используя свойство mask, укажем еще два градиентных фона (того же цвета, что и body (не обязательно)). Первый будет маскировать (покрывать) область в пределах границ отступа, а второй маскировать (покрывать) область вплоть до границы.
Кроме того, нужно установить mask-composite, чтобы исключить верхний слой из нижнего, чтобы увидеть границу.
See the Pen vaRVyd by Websitio (@Websitio) on CodePen.
Просто скопируйте следующий код: