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

ボーダーにグラデーションを指定するCSS

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所ボーダー
カスタマイズ方法CSS
テンプレート変更なし
コピペの可否90% 可能

2017年、サイトデザインで大流行したのがグラデーション。

2018年にも引き続き大流行の予感。

サイト全体に使ってもいいですが、ごく一部に使ってもいい感じに。

サイトにちょっとアクセントを付けたい時に、私がよく使うのがグラデーションのボーダーです。その指定方法をご紹介します。

指定は 2つの CSS プロパティだけ

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

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

.sample {
  border-image: linear-gradient(to right, #e91e63, #ffcdff, #cd96eb, #9662b3) 1/0 0 6px 0;
  border-style: solid;
}

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

ボーダーにグラデーションを指定した例

border-image の指定方法は、 background-image と似ています。

違いは 2つ。

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

2つ目は border-image-width に関する 0 0 6px 0 で、ボーダーの太さを指定すること。数値は上 → 右 → 下 → 左の順番なので、下のみに 6px の太さのボーダーを表示する指定です。

非常に簡単。気をつけるべきは border-image-width に関する値の前に / が必要なことぐらい。

また、 border-style の初期値は none なので、 border-style: solid; の指定が必要です。

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

linear-gradient の指定方法は、 CSS グラデーションの利用 – MDN をご参考ください。非常に分かりやすく説明されています。

はっきりと色を区切る

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

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

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

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

4色をはっきりと区切ったボーダーの例

% を細かく指定することで、はっきりと色を区切れます。

子ども向けサイトなど、元気いっぱいを表現したい時に便利。

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

.sample {
  border-image: linear-gradient(to right, #3f51b5 33.333333%, #fff 33.333333%, #fff 66.666666%, #f44336 66.666666%) 1/0 0 2px 0;
  border-style: solid;
}

ボーダーをトリコロールカラーにした例

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

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする