どうも！LSSです！！
CSSでborderをグラデーション色付け、なんとなく分かりました^^
成功例
サンプル
コード
<div style="border: 15px solid; border-image: linear-gradient(135deg, red,blue); border-image-slice: 1;">てすと</div>
必要最小限の指定は↑こんな感じです。
失敗例
サンプル
コード
<div style="border: 15px solid; border-image-slice: 1; border-image: linear-gradient(135deg, red,blue);">てすと</div>
失敗する要因
<div style="border: 15px solid; border-image-slice: 1; border-image: linear-gradient(135deg, red,blue);">てすと</div>
border-image-slice: 1; を、border-image: linear-gradient(135deg, red,blue);より前に書くと失敗します^^;
とんだ落とし穴でしたねｗｗｗ
コード解説
border: 15px solid;
border（枠線）の太さを15px、線の種類はsolid（実線）としています。
※solidの部分の他に使えるものとして、
dotted dashed double groove ridge inset outset
などがありますが、このグラデの場合はどれを選んでも変化しないようです^^;
border-image: linear-gradient(135deg, red,blue);
直線グラデーションについた書いた記事の時の、background-image:をborder-image:に変えただけで、あとは全く同じ書き方です。
この例だと、135deg（右下方向に向かうグラデ）、赤から青へ、という指定です。
border-image-slice: 1;
かなりの曲者でした^^;
border-image-sliceについては、
https://developer.mozilla.org/ja/docs/Web/CSS/border-image-slice
に解説があります。
…とりあえず、グラデとして使用する分には、値は1で良さそうです。
作成例
サンプル
コード
<div style="width: 300px; height: 300px; padding: 1em; border: 15px solid; border-image: linear-gradient(150deg, black,brown,yellow,white,yellow,brown,black); border-image-slice: 1;">きんきらきんのきーん♪</div>
やってみて気づいたんですが
borderをグラデにした時って、border-radius（角丸）が効かないようです^^;
う～ん、残念！
border-image-sliceがとても難解でした^^;
が、「border-imageは画像ファイルを扱う事もでき（というかそっちがメイン用途？）、画像ファイルとして考えるとなんとなく理解できた」気がしますｗ
うまく使うと、「手描き風の枠線」や「すごく凝ったデザインの枠線」を、元画像を用意する事で実現できそうです。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
