See the Pen border-image-gradient by Takashi Abe (@TakeshiAbe) on CodePen.
今回は、このようなグラデーションになったborderの作り方です。
グラデーションといえばgradient。線形のグラデーションをつくるプロパティといえば、linear-gradient、repeating-linear-gradinet。
グラデーションですし感覚的には”color”にまつわるプロパティなのですが、cssでは「image」として扱われます。
borderがグラデーションになっているのは、borderプロパティで色指定するのではなく、border-image-sourceにlinear-gradientを当てているからです。
というわけで今回の主題は「border-image」です。linear-gradientまでやってしまうと長くなるので詳しくはlinear-gradientへどうぞ。
border-imageプロパティ
好きな画像をborderとして使えるborder-image。最近あまり見なくなりましたが、以前はそこそこ使われていたような気がします。
border-imageプロパティはショートハンド型であり、1つずつ指定するには
- border-image-source (画像urlやlinear-gradient)
- border-image-width (borderの幅)
- border-image-slice (画像の使用範囲)
- border-image-outset (要素とborderの間隔)
- border-image-repeat (辺の処理)
を使用します。指定なければ初期値が適用されます。
なお重要なことですが、border-imageプロパティを使うときも「border」プロパティの指定をしないといけません。
無いと表示されない場合もありますし、万一border-imageが読み込まれなかったときに代替表示されます。
では個別に説明していきますが、-source については特に説明いらないだろうと思うので省きます。
border-image-width
border-imageの表示幅です。指定がない場合は、borderに指定された幅が適用されます。
どちらの指定もない場合は表示されません。
値を空白区切りで2つ指定すると上下・左右、 3つ指定すると上・左右・下、 4つ指定すると上・右・下・左の辺をそれぞれ指定できます。
border-image-outset
要素とborderの位置関係を定義します。
初期値は「0」で、border-imageが要素の内側ピッタリになるよう配置されます。
borderで指定した幅、(borderが無い場合はborder-image-widthで指定した幅)を1として、数字が大きくなるほど要素の外側に広がります。(たとえばborder-image-outset:1; なら、要素の外側ピッタリになる)
「1」「1.2」などの数値のほか、px・em・remなどの指定も可。
0以下の指定をするとエラー。
ここまでは特に問題ないと思います。
では、ここまでのプロパティだけを指定してborder-imageを設定してみるとどうなるか、

↑(縦横100pxの画像)を使うパターンと、linear-gradientを使ったパターンの2種類やってみます。
.sample共通{
background: #fff ;
border-image-width: 10px ;
border-image-outset: 1 ; /* ( = 10px ) */
}
.sample1{
border-image-source: url(sample.png) ;
}
.sample2{
border-image-source: linear-gradient(navy,tomato) ;
}
なんとも残念な結果になってしまいました。
ここで大切になってくるのが残り2つのプロパティです。
border-image-slice
border-image-slice は、border-imageに対する画像の使用範囲を指定します。
初期値は「100%」。
ですので、先程のように画像は全体(100%)が使用され、border-image-width(10px)にあわせて縮小されています。
もしborder-image-slice:50%;と指定すると、上の辺には画像の上から50%、右の辺には画像の右から50%、、という具合に各々切り取られます。
%ではなく数値で指定した場合、px値で計算されます。(10と指定すれば10px)。(ただしベクター画像を利用した場合は数値指定 = %となります)
指定値が元の画像よりも大きくなった場合は100%に自動変換されるのでご注意。
ここから少し分かりにくくなるのですが、頑張って説明しますのでついてきてください。
border-imageをsliceで分割する場合、最初に四隅の角が決定され、角の間の辺は次に指定するborder-image-repeatによって調整されます。
文章では分かりにくいと思うので、先程の例にborder-image-slice:33%;を追加してみます。
上下左右から約3分の1ずつとるので、の模様が一列分ずつ適用されるはずです。

(見ての通り、グラデーションかけるだけならここまでで出来てしまうのですが、もう少しお付き合いください。)
説明画像と合わせて見てもらうと分かりますが、四隅の角には画像の33%分がぞれぞれ配置され、辺は引き伸ばされています。
この辺の部分をどうするか調節するのが、最後のborder-image-repeatです。
書き忘れていましたが、border-image-sliceも複数の値をセットできます。書き方はborder-image-widthと同じです。
また、border-image-sliceの値に「fill」を併用すると要素の内側まで背景が浸食します。
ついでなんでやっておきます。
.sample1{
border-image-slice: 33% 16% ; /* 追加 */
}
.sample2{
border-image-slice: 33% fill ; /* 追加 */
}
画像の方はsliceの左右を16%にしたので、四隅に使われる画像部分が小さくなり、上下の引き伸ばされる部分が増えました。
fillを指定した場合、backgroundより上に表示されますので、使用の際はご注意ください。
border-image-repeat
最後は辺の部分をどう処理するか指定するborder-image-repeatです。
「background-repeat」と一緒だろと思ったら失敗してしまうプロパティ。
指定できる値は
「stretch(初期値)」「round」「space」「repeat」の4種類。
先程までは指定していないのでstretch(引き伸ばし)となっていました。
これは見たほうが早いので一挙サンプルです。
stretch以外の3つはどれを指定しても辺を埋めるために繰り返されます。違いは半端部分の処理です。分かりにくいですが改めて見比べてみてください
round | 半端が出ないように引き伸ばして調整 |
---|---|
space | 空白を設けて調整する |
repeat | 単純に繰り返しで埋める(その結果隅っこが欠ける) |
border-image-repeatに値を2つ指定すると上下・左右を調整できます。3つ以上の指定はエラーです。
以上でborder-imageプロパティの説明終了ですがどうでしょう? 説明下手なのでかなり長丁場となってしまいましたが、「分かった!」と思ってくだっていれば幸いです。