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;
}

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

Gradation

使用するのは border-image 。border-image は、border-image-source・border-image-slice・border-image-width・border-image-outset・border-image-repeat の一括指定プロパティです。

参考：border-image – CSS: カスケーディングスタイルシート | MDN

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

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

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

値を 1 つ指定した場合：その値が四辺に適用されます。
値を 2 つ指定した場合：1 つ目の値が上下、2 つ目の値が左右に適用されます。
値を 3 つ指定した場合：1 つ目の値が上、2 つ目の値が左右、3 つ目の値が下に適用されます。
値を 4 つ指定した場合：1 つ目の値が上、2 つ目の値が右、3 つ目の値が下、4 つ目の値が左に適用されます。

また、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;
}

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

Gradation

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

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

.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;
}

Gradation

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

角を丸くはできない

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

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

border-image

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

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

::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 では、角を丸くできません。

border-image

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

::before

::before を使った CSS の一例です。

.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);
  content: '';
  inset: 0;
  margin: calc(var(--border-width) * -1);
  position: absolute;
  z-index: -1;
}

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