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