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

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

border-image を使えば、ほんの少しの CSS で完成します。

その指定方法の紹介です。

基本の指定方法

ボーダーをグラデーションにするには、わずか 2 つの CSS プロパティを指定するだけです。

このような 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-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat の一括指定プロパティです。

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

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

1 つ目は border-image-slice1 を指定すること。

2 つ目は border-image-width0 0 6px で、ボーダーの太さを指定すること。この値の指定は、marginpadding と全く一緒です。尚、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-imagelinear-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;
  padding-bottom: 16px;
}

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

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 の値より大きい場合を想定したものです。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。