【CSS】borderをグラデーションにする方法

一方向グラデーション

一方向グラデーションは下記のように指定します。

<style>
.border-image{
    border: 20px solid;
    border-image: linear-gradient(to right,yellow,green) 1;
    height: 100px;
}
</style>
<div class="border-image">一方向グラデーション</div>

まず「border」で線の太さと種類(solid)を指定します。ふつうはここで色も指定しますが、グラデーションの指定で上書きするため指定は不要です。

グラデーションは「border-image: linear-gradient(方向,始まりの色,終わりの色) 1」という形で指定します。

「方向」には「to right」や「to bottom」のように指定します。角度を指定することも可能です。

「始まりの色」と「終わりの色」にはカラーコードを指定しましょう。

色は複数指定したり位置を指定することも可能です。

一部の線だけグラデーション

borderを指定するとき「border-bottom」や「border-left」のように一部の線だけ指定することも可能です。

<style>
.border-image-bottom{
    border-bottom: 20px solid;
    border-left: 10px solid;
    border-image: linear-gradient(to right bottom,yellow,green) 1;
    height: 100px;
}
</style>
<div class="border-image-bottom">一方向グラデーション</div>

中央から外側へのグラデーション

中央から外側へのグラデーションは下記のように指定します。

<style>
.border-image2{
    border: 20px solid;
    border-image: radial-gradient(yellow,green)49% 1;
    height: 100px;
}
</style>
<div class="border-image2">円形グラデーション</div>

基本は一方向グラデーションと同じです。

そのうえで「linear」が「radial」に変わります。また、方向の指定はできません。

色の後ろに「49%」を指定します。中途半端ですが50%にすると左右の線がなくなってしまいます。

一周グラデーション

<style>
.border-image3{
    border: 20px solid;
    border-image: conic-gradient(#f5f551,#5eff5e,#84a1ff,#ff45ff,#ff5a5a,#ffbc41,#f5f551) 1;
    height: 100px;
}
</style>
<div class="border-image3">一周グラデーション</div>

基本は一方向グラデーションと同じです。

そのうえで「linear」が「conic」に変わります。

まとめ

方向一定グラデーション

border: 20px solid;
border-image: linear-gradient(to right,yellow,green) 1;

中心から外側へグラデーション

border: 20px solid;
border-image: radial-gradient(yellow,green)49% 1;

一周グラデーション

border: 20px solid;
border-image: conic-gradient(yellow,green) 1;

以上、borderをグラデーションにする方法でした。