Как сделать 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.