border-image でグラデーションのボーダー

サイトにアクセントを付けたい時に活躍するのが、グラデーションのボーダー。

border-image を使えば、ほんの少しの CSS で完成します。使用する CSS プロパティは、わずか 2 つだけです。

このような HTML に…。

<p class="sample">Gradation</p>

下記の CSS を指定してみると…。

.sample {
  border-image: linear-gradient(90deg, #ea0032, #ef0061, #e4008f, #c835b9, #9956db) 1/0 0 6px;
  border-style: solid;
}

グラデーションのボーダーのできあがり。

使用するのは、border-image 。

background-image の指定と若干似ていますが、違いが 2 つあります。

1 つ目は、border-image-slice の 1 を指定すること。

2 つ目は、border-image-width の 0 0 6px で、ボーダーの太さを指定すること。この値の指定方法は、margin や padding と全く一緒です。尚、border-image-width の値の前に / が必要です。

また、border-style の初期値は none であるため、border-style: solid; も指定します。

::before や ::after 疑似要素に background-image を指定し、ごにょごにょすることでも同様のことはできます。しかし、border-image の方がはるかに楽です。

尚、linear-gradient の指定方法は、CSS グラデーションの使用 – CSS: カスケーディングスタイルシート | MDN をご参考ください。

border-image と linear-gradient の組み合わせを応用し、はっきりとした色使いも表現できます。

例えば下記の指定をしてみます。

.sample {
  border-image: linear-gradient(90deg, #ff1744 25%, #00e5ff 25%, #00e5ff 50%, #c6ff00 50%, #c6ff00 75%, #ffea00 75%) 1/0 0 4px;
  border-style: solid;
}

すると、赤・青・緑・黄のカラフルなボーダーに。

% を細かく指定すれば、はっきりと色を区切れます。子ども向けサイトなど、元気いっぱいを表現したい時に便利。

また、下記のように指定すれば、トリコロールカラーを表現できます。

.sample {
  border-image: linear-gradient(90deg, #3f51b5 calc(100%/3), #fff calc(100%/3), #fff calc(100%/3*2), #f44336 calc(100%/3*2)) 1/0 0 4px;
  border-style: solid;
  padding-bottom: 16px;
}

シックなサイトであれば、2 色にすると雰囲気を壊さずアクセントを付けられます。

簡単にグラデーションのボーダーを表現できる border-image ですが、角を丸くできない欠点もあります。

例えば、少し太めの下線を border-image で表現するとします。

この下線の角を丸くしようと考えても border-image では不可能です。

角を丸くする場合は、::before や ::after 疑似要素を使うしかありません。

::after 疑似要素を使った CSS の一例です。

.sample:after {
  background: linear-gradient(90deg, #ea0032, #ef0061, #e4008f, #c835b9, #9956db);
  border-radius: 50px;
  content: '';
  display: block;
  height: 12px;
  margin-top: 8px;
}

また、四辺の場合も同様です。border-image では、角を丸くできません。

角を丸くする場合は、::before や ::after 疑似要素を使います。

HTML は、ボーダーを付けたい要素に親要素（下の HTML では <div>）を設けます。

<div class="sample-wrap">
  <p class="sample">::before</p>
</div>

そして、::before を使った CSS の一例です。

.sample-wrap {
  position: relative;
  z-index: 0;
}

.sample {
  --border-width: 6px;
  --border-radius: 16px;
  background: #fff;
  border-radius: calc(var(--border-radius) - var(--border-width));
  box-sizing: border-box;
  margin: var(--border-width) auto;
  padding: calc(24px - var(--border-width)) 24px;
  position: relative;
  width: calc(100% - var(--border-width)*2);
}

.sample:before {
  background: linear-gradient(90deg, #ea0032, #ef0061, #e4008f, #c835b9, #9956db);
  border-radius: var(--border-radius);
  bottom: 0;
  content: '';
  left: 0;
  margin: calc(var(--border-width)*-1);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

ボーダーの太さは --border-width: 6px;、角の丸さは --border-radius: 16px; で指定しています。尚、この CSS は、--border-radius の値が --border-width の値より大きい場合を想定したものです。