たった2行のCSSで、ボーダー線にグラデーションを与える方法

ウェブ制作で、線にグラデーションをかけたい時がありますよね。

いちいち画像にして設置するにも面倒だし、手っ取り早くCSSで解決できないかな？

そんな方の為に、たった2行のCSSのみでグラデーションのかかったボーダー（線）を作成する方法を紹介していきますね。

サンプル

例えば、赤から黒へグラデーションをかける場合

解説

それでは解説していきますね。

今回のCSSは、分かりやすくする為にHTMLにインラインで記載していますが、基本的にはスタイルシートに書いていただいてもちろん問題ありません。

まずは、ボーダーの線幅を指定しておきましょう。（border-bottom: 10px solid;）

次に、今回の要となる「border-image」プロパティを利用します。

border-imageプロパティ

border-imageでは、linear-gradient（リニア　グレイデイアント）を指定する事ができます。

linearとは線の形、gradientは「勾配・傾度」という意味で、このCSSでは「左から右へ（to right）色の変化をつける」という意味になります。

その色の変化のスタート地点を、左から0％地点を「red」、左から100％の地点を「black」になるように色の変化を与えます。

％の基準点を増やしたり、色を変化（ウェブカラー指定の場合は「＃+6桁の英数字」）させる事で多彩な表現をする事ができます。

border-image-sliceプロパティ

しかし、これだけではボーダーにグラデーションを与える事ができません。実は、border-image-sliceというプロパティも一緒につけてあげる必要があります。

border-image-sliceは、以下のように四角形を9つの領域に分断して、部分的に場所を指定する場合に利用します。

今回の場合は、整数で1〜9までの数字を1つ与えると上手く表示されるようになりますので、「1」を当てています。

線にグラデーションを当てるだけなら、どの数字でも結果は同じなので、数字に関してはあまり気にしなくて良いので、border-image-sliceの値は「1」くらいで覚えておきましょう。

border-imageは一括指定プロパティ

border-image-slice？？　ちょっと待って！　上のサンプルコードには、border-image-sliceなんて書いてないけど？と思われますよね。そうなんです。実はborder-imageプロパティは、一括指定プロパティと呼ばれるもので、border-imageにborder-image-sliceをくっつけて表記する事が可能です。

単純にコードを書く手間が省けるというだけのメリットになります。

ですので、ボーダーにグラデーションを与えるのであれば、以下のように覚えておけば良いのではないでしょうか。