【CSSテクニック】CSSで枠線にグラデーションを適用する方法

枠線にグラデーションを適用する

枠線（要素の境界線）にグラデーションを適用するには「border-image」プロパティを使用します。

「border-image」プロパティを使うことで枠線に画像を設定することもできます。

border-imageプロパティ

border-imageは5つのプロパティで構成されています。

border-imageはこの5つのプロパティの一括指定プロパティです。

プロパティ	詳細
border-image-source	グラデーションや画像を指定します。
border-image-slice	sourceで指定した画像を分割します。
border-image-width	指定した画像の幅を指定します。
border-image-outset	指定した画像が要素の境界線からはみ出す幅を指定します。境界線画像の高さの半分を指定すると半分だけはみ出す枠線が作成でき、0に指定するとはみ出さない枠線が作成できます。
border-image-repeat	指定した画像の辺の配置方法を設定します。

それでは実際に「border-image」を使って枠線にグラデーションを適用してみましょう。

【作成例】

グラデーション版サンプルコード

枠線をつける要素を用意します。

HTML

  
    <div class="border-gradation">
    </div>
  

CSSでborderとborder-imageを使用します。

CSS

  
    .border-gradation {
      width: 200px;
      height: 200px;
      /* borderで線の種類、線幅、border-imageが効かない時用の色を指定 */
      border: solid 5px #42e3ff;
      /* source | slice */
      border-image: linear-gradient(#42e3ff, #6642b3) 30px;
    }
  

ただし、border-radiusを指定しているとborder-imageが効かなくなります。

border-radiusを指定している枠線にグラデーションを適用する方法は以下より。

枠線に画像を適用する

グラデーションと同様にborder-imageを使用して枠線に画像を適用します。

【作成例】

【borderに使用する画像】 60px x 60px の画像を使用しました。

画像版サンプルコード

枠線をつける要素を用意します。

HTML

  
    <div class="border-picture">
    </div>
  

CSSでborderとborder-imageを使用します。

CSS

  
    .border-picture {
      width: 200px;
      height: 200px;
      /* borderで線の種類、線幅、border-imageが効かない時用の色を指定 */
      border: solid 20px #42e3ff;
      /* source | slice | repeat */
      border-image: url('画像ファイルのパス') 20 round;
    }
  

まとめ

枠線にグラデーション、画像を適用する方法をご紹介しました。

border-imageに使用する画像は境界線の幅に合わせたものを用意した方がきれいに表示されます。

プロパティの指定方法は複数ありますので色々試してみてください。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/border-image