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
の一括指定プロパティです。
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; }
すると、赤・青・緑・黄のカラフルなボーダーになります。
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
の値より大きい場合を想定したものです。