ホーム(記事一覧)へ

border-colorをグラデーションにする方法

border(枠線)をグラデーションしてかっこよくしたい!
というかたへborder-colorをグラデーションにする方法を説明します。

結論:border-imageにlinear-gradientまたはradial-gradientを使う

方向一定グラデーション

方向一定グラデーション

html

<div class="border-image">方向一定グラデーション</div>

CSS

.border-image{
    border: 20px solid;
    border-image: linear-gradient(yellow,green) 1 / 20px;/*線形グラデーション指定 1以上の値 / border-widthと同じ値*/
}

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

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

html

<div class="border-image2">中心から外側へグラデーション</div>

CSS

.border-image2{
    border: 20px solid;
    border-image: radial-gradient(yellow,green) 49% / 20px;/*円形グラデーション指定 border-width含む縦横の半分未満 / border-widthと同じ値*/
}

解説

border-imageを使うことでグラデーションの線を使用できます。

border-imageは本来画像を指定するCSSプロパティですが、利用頻度を考慮しグラデーションの線について説明します。

border-imageはborder-color(色)にあたるためborder-width(線幅)とborder-style(線の種類)は別途指定しておく必要があります。

border: 20px solid;

border-image使い方

border-image:グラデーション指定 線の箇所指定 / 線幅

border-imageの使い方を完璧に理解するのは難しいのでコピペして必要な箇所だけ変更でOKです。

方向一定グラデーション

border-image: linear-gradient(yellow,green) 1 / 20px;

linear-gradientは方向一定のグラデーション指定方法です。

シンプルに色→色だけでなく、模様を指定することも可能です。
linear-gradientで模様を作る方法は調べればたくさん出てきますので応用が簡単です。

後ろの「20px」はborder-widthと同じにします。

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

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

radial-gradientは円形のグラデーション指定方法です。

次の線の箇所指定の数値と単位が違うので注意しましょう。

後ろの「20px」はborder-widthと同じにします。

まとめ

方向一定グラデーション

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

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

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

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

関連記事