はじめに

こんにちは、エンジニアのmiyakawaです。

HTMLにて、要素を目立たせる方法の1つに、グラデーションを使う方法があります。

border: 10px solid;
border-image: linear-gradient(90deg, #0000ff 0%, #ff00ff 100%) 1;

また枠線を使用する際、角丸にしたいなどありますよね。

ただ枠線のデザインにおいては、上記のようにborder-imageプロパティを使用したグラデーションの場合、CSSだけでは枠線を角丸にできなくなってしまうという課題が発生してしまいます。

border-imageによる枠線のグラデーションの問題

border-imageを使わないグラデーションなしの場合

まず、通常のCSSで枠線を表現する方法を確認します。前提として、テキストを見やすくするために、color: white; padding: 10px;を常に付与しています。

background-color: green; だけを指定した要素は以下のようになります。

background-color: green;

次に、border: 10px solid blue; を追加すると青い枠線が表示されます。

background-color: green;
border: 10px solid blue;

通常の枠線の場合、border-radius を追加することで枠線を角丸にできます。

background-color: green;
border: 10px solid blue;
border-radius: 100px;

border-imageの説明

border-imageは、以下のCSSプロパティを一括指定できます。

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

はじめに紹介したグラデーションした枠線のCSSは、border-imageプロパティのborder-image-sourceに linear-gradientを、border-image-sliceに1を指定しています。

border-image: linear-gradient(90deg, #0000ff 0%, #ff00ff 100%) 1;

border-image-sourceとは、枠線に使用する画像を設定するプロパティです。ここではlinear-gradient関数で生成したグラデーション画像を使用しています。

またborder-image-sliceとは、画像の分割の方法を決めるプロパティです。

本来は、border-image-sourceの指定画像を4つの角と4つの辺と中央の9つの領域に分割し、その分割に合わせて枠線の画像が描画されます。ですがlinear-gradient関数の場合は分割した後の領域に合わせてグラデーションが描画されるので、4つの角と4つの辺の1ピクセル分の領域を確保するためborder-image-slice: 1と指定しています。

border-imageを使う場合の問題

枠線をグラデーションにする方法として一般的に border-image を使用する方法があります。しかし border-image を使用すると枠線が角丸になりません。

background-color: green;
border: 10px solid;
border-radius: 100px;
border-image: linear-gradient(90deg, #0000ff 0%, #ff00ff 100%) 1;

これは、border-radiusによる画像の切り抜きができない仕様をborder-imageが持っているので角丸にならないのです。そのためborder-imageを使わない方法を考える必要があります。

解決策

border領域まで広げたグラデーション画像を表示する方法が最もシンプルに実装できます。

border-radius: 100px;
border: 10px solid transparent;     /* 枠線の余白を作る */
background:
  linear-gradient(green) padding-box,
  linear-gradient(90deg, #0000ff 0%, #ff00ff 100%) border-box;

border-boxの背景色のグラデーションにpadding-boxの背景色を重ねて表示することで枠線をグラデーションしたような描画になります。

CSSのボックスモデルに基づいた実装の詳細は以下の通りです。

• padding-box … content＋padding の範囲に背景色を適用
• border-box … content＋padding＋border の範囲に背景色を適用

▼ボックスモデルの図解（真ん中がcontent）

実装したCSSの詳細

1. 枠線を透明にする

枠線の色を透明（border: 10px solid transparent;）に変更します。こうすることで枠線の領域だけ余白として確保されます。

background-color: green;
border: 10px solid transparent;
border-radius: 100px;

2. 背景色をpadding-boxに適用する

background: 背景色 padding-box; と指定することで、背景色を枠線の領域に含めないようにします。

background: green padding-box;
border: 10px solid transparent;
border-radius: 100px;

3. 枠線にしたいグラデーションをborder-boxに適用する

最後に background に border-box のグラデーションを追加することで、角丸ありのグラデーションした枠線が完成します。

background: linear-gradient(green) padding-box,
            linear-gradient(90deg, #0000ff 0%, #ff00ff 100%) border-box;
border: 10px solid transparent;
border-radius: 100px;

まとめ

CSSでグラデーションされた角丸あり枠線を実装するには以下のポイントを押さえます。

• border-image では角丸が効かないため使用しない
• border: 10px solid transparent; で枠線の領域を余白として確保する
• background プロパティに padding-box と border-box を組み合わせて指定する

background プロパティを重ねることで、border-image を使わずにグラデーションと角丸を両立した枠線を実現できます。

みなさまもグラデーションを設定して、Webサイトのデザインを変化させてみてはいかがでしょうか。