グラデーションボーダーを実装する2つの方法と使い分け【CSS小ネタ】

この記事ではCSSでグラデーションボーダーを実装する2つの方法についてまとめています。

結論から言うと、

• 角丸に対応したい場合はbackgroundを使う方法
• 透過に対応したい場合はborder-imageを使う方法

を選択するのがベストです。

この記事では、それぞれの実装方法と仕組み、メリット・デメリットを解説します。

HTMLはいずれも共通のものを使用しています。

1
<div class="box">コンテンツ</div>

backgroundを使う方法

まずはbackgroundを使う方法です。以下が実装例です。

1
.box1 {
2
  border: 5px solid transparent;
3
  background:
4
    linear-gradient(#fff, #fff) padding-box,
5
    linear-gradient(to right, #56ab2f, #006400) border-box;
6
}

5pxの透明のボーダーを作成し、その内側にbackgroundで2層のグラデーションを適用しています。backgroundの詳細は次のとおりです。

borderを含むより広い領域をグラデーションで設定し、borderを含まない内側の領域を白色で設定し、多重レイヤーを作成しています。この方法では角丸の設定も容易です。

1
.box1 {
2
  border: 5px solid transparent;
3
  background:
4
    linear-gradient(#fff, #fff) padding-box,
5
    linear-gradient(to right, #56ab2f, #006400) border-box;
6
  border-radius: 20px;
7
}

一方で弱点としては、コンテンツ部分の透過ができないことです。padding-boxに明示的に色を指定しているため、コンテンツ部分は常に色有りとなります。padding-boxの1層目にtransparentを指定すると、2層目のグラデーションが全面に適用されてしまいます。

border-imageを使う方法

次はborder-imageを使う方法です。以下が実装例です。backgroundを使う方法と見た目は同じです。

1
.box2 {
2
  border-width: 5px;
3
  border-style: solid;
4
  border-image-source: linear-gradient(to right, #56ab2f, #006400);
5
  border-image-slice: 1;
6
}

border-imageを使用する方法では、まずは枠線の幅と形状を指定します。border-colorは設定してもしなくても構いません。そして参照するグラデーションをborder-image-sourceで指定します。

ただこの状態では枠線が描画されないため、border-image-slice: 1;で枠線の幅を指定します。

border-image-slice: 1;は、要素の境界線（ボーダー）に画像を適用する際、参照元の画像のフチから「1ピクセル」または「1%」の位置で画像を切り取る（スライスする）ことを指定するCSSプロパティです。あまり聞き慣れないプロパティですが、border-imageを使用する場合には必須のプロパティです。

この方法のメリットは、透過にも対応できることです。

1
body {
2
  background-color: lightgray;
3
}

一方で、角丸の設定ができないことが弱点です。これはCSSの仕様において、border-imageとborder-radiusは同時に適用できないと定められているためです。

1
.box2 {
2
  border-width: 5px;
3
  border-style: solid;
4
  border-image-source: linear-gradient(to right, #56ab2f, #006400);
5
  border-image-slice: 1;
6
  border-radius: 20px; /* これは無視される */
7
}

まとめ

今回はグラデーションボーダーの作り方として、backgroundを使う方法とborder-imageを使う方法の2つを紹介しました。使い分けとしては主に以下のようになると考えています。

• 角丸の設定が必要な場合はbackgroundを使う
• 透過に対応したい場合はborder-imageを使う

では両方に対応する場合はどうすればいいかというと、border-imageを使う方法で透過させてから、擬似要素を重ねる方法が良さそうです。以下の記事が参考になります。 CSSでborderの色をグラデーションにした上で角を丸くしたい！ #CSS - Qiita