どうも！LSSです！！
で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。
border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。
特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりしますね^^
今回は、そんなborder-imageならではの枠線を考えてみました。
枠線３種
コード
<div style="border: 30px solid; border-image: radial-gradient(farthest-side,transparent 30%,#ff888880,transparent 100%) 49%;">ぼやけた角丸枠</div>
<div style="border: 30px solid; border-image: radial-gradient(farthest-side,transparent 49.9%,#ff8888 50% 59.9%,transparent 60% 69.9%,#ff8888 70% 79.9%,transparent 80% 89.9%,#ff8888 90% 99.9%,transparent 100%) 49%;">トリプル角丸枠線</div>
<div style="border: 20px solid; border-image: linear-gradient(red,orange,yellow,green,lightblue,blue,purple) 30%;">縦に虹色</div>
とりあえず３種、ですが
border-styleにできないものを選んでみました。
gradientの内容によって、例えば３本線を４本・５本と増やす事もでき、ぼやけたグラデーションを組み合わせる事もできたりもしますね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
