ボーダーにグラデーションをかけたい

CSSを使用して背景にグラデーションをかけることはできます。ボーダーもグラデーションをかけて表示させたいこともあるでしょう。そのようなときに、ちょっとした工夫でグラデーションのボーダーを表現することができます。

グラデーションボーダーを作る方法

まずは、テキストの左側にボーダーを引くという、見出しデザインなどでよく用いられるボーダーの使い方です。単純な1色のべた塗りボーダーではつまらないというときに使えそうなパターンです。

h2 {
  padding-left: 10px;
  background: linear-gradient(#007bff, #65bcf7);
}

h2 span {
  display: block;
  padding-left: 10px;
  background: #fff;
}

仕組みとしては、h2要素の背景にグラデーションを敷いて、その中のspan要素の背景を白色にして、ボーダーとして見せたい太さ分だけh2要素の左側にpaddingを設けます。そうすることでグラデーションのボーダーとして表現できます。

次は、ボックスの枠線にグラデーションがかかったような表現をしてみます。

.box {
  padding: 20px 0;
  border: 12px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#a500ff, #c971fc);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

まずは、ボックスに「transparent」という値を使って透明のボーダーを引きます。そして、background-imageプロパティを使ってグラデーションを敷きます。カンマ区切りで複数指定した場合、先に指定した値の方が上に重なって表示されます。この場合、紫色グラデーションの上に白色グラデーションが重なっている状態となります。あとは、background-originプロパティで背景画像の表示基準ポイントを指定し、background-clipプロパティで表示領域を指定しています。
幅や高さを固定したい場合は、「width」や「height」を指定してください。

厳密にはボーダーをグラデーションにしているわけではなく、背景画像を利用してボーダーっぽく見せているだけなのですが、どうしてもグラデーションのボーダーを表示させたいという場合には、このような方法も使ってみるのも1つの手ではないでしょうか。