・borderをグラデーション表示するにはどうするの？
・できれば角丸で表示したい。
こんな疑問にお答えします。
案件によってはborder線がグラデーションになっているデザインがありますよね。
初めての人は、あれどうやって実装するんだ？と思うはず。
実は簡単に実装できちゃいます。
すぐにできるよ！
ただ角丸をつける場合は、少しやり方を工夫する必要性あり。
ということで、この記事では「CSSでborderをグラデーション表示する方法３選」について解説していきます！
➀：CSSでborderをグラデーション表示する方法【border-image】
➁：CSSでborderをグラデーション表示する方法【疑似要素を使う】
➂：CSSでborderをグラデーション表示する方法【要素を重ねる】
目次
【方法①】CSSでborderをグラデーション表示する【border-image｜角丸は✕】
１つ目の方法が「border-image」を利用すること。
そんなグラデーションをつけたborderのサンプルがこちらになります。
See the Pen Untitled by jito-coder (@jito-coder) on CodePen.
紺色から灰色にグラデーションがかかったborderになっていますよね。
<div class="border">ボーダーグラデーション</div>.border {
border-width: 3px;
border-style: solid;
border-image-source: linear-gradient(45deg, #000066 0%, #ccc 100%);
border-image-slice: 1;
}いつも通り、borderの表示する太さと線の形を表示したいタグに対して指定しましょう。
.border {
border-width: 3px;
border-style: solid;
}あとはborder-imageを指定するだけで、グラデーションがかかったborderの実装が完成します。
.border {
border-width: 3px;
border-style: solid;
border-image-source: linear-gradient(45deg, #000066 0%, #ccc 100%);
border-image-slice: 1;
}border-image-sourceにグラデーションの角度や向き、そして色を記述。
border-image-sliceに１を指定。これで実装完成です。
border-imageに対して、border-radiusは効きません。
そのためこの方法では、角丸をつけたグラデーションのborderを実装するのは厳しいです。
角丸をつけたい場合は、他２つの方法を使いましょう。
ただ普通のグラデーションborderを作る場合は、この方法①が一番簡単化と思われます！
【方法②】CSSでborderをグラデーション表示する方法【疑似要素を使う｜角丸〇】
２つ目の方法が、疑似要素を使ってグラデーションがかかったborderを表示するやり方です。
そんなサンプルがこちらになります。
See the Pen ➁borderグラデーション by jito-coder (@jito-coder) on CodePen.
紺色から灰色にグラデーションがかかったborderになっていますよね。
角丸も実装可能です。
<div class="border">ボーダーグラデーション</div>.border {
width: 100%;
padding: 20px;
position: relative;
background-color: #fff;
}
.border::before {
content: '';
display: inline-block;
position: absolute;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
background: linear-gradient(45deg, #000066 0%, #ccc 100%);
z-index: -1;
}この方法の作成手順としてはこちら↓
- 中要素の背景を指定
- 疑似要素を使ってグラデーションborderを実装
- 角丸をつける場合はborder-radiusの数値を工夫
順に見ていきましょう！！
まず中要素の背景を指定します。
.border {
width: 100%;
padding: 20px;
position: relative;
background-color: #fff;
}今回は背景に白を指定。
また、疑似要素を使うためにposition: relativeも忘れずに。
あとは疑似要素を使って、グラデーションがかかったborderを実装するだけ。
.border::before {
content: '';
display: inline-block;
position: absolute;
// グラデーションを背景色につける
background: linear-gradient(45deg, #000066 0%, #ccc 100%);
// borderの太さ分、マイナス値に位置づけ
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
// 要素の下に配置
z-index: -1;
}backgroundでグラデーション背景色を作り、それをマイナス値に位置づけします。
このマイナス値が、borderの太さになります！
そしてこの疑似要素を、divタグ要素の下に配置することで、マイナス値分の背景色が見えるという仕組みです。
疑似要素を使うやり方だと、角丸をつけることが可能です。
もし角丸をつけたい場合は、border-radiusの数値を工夫してつけましょう。
<div class="border02">ボーダーグラデーション</div>.border02 {
width: 100%;
padding: 20px;
position: relative;
background-color: #fff;
// divタグのradius数値
border-radius: 8px;
}
.border02::before {
content: '';
display: inline-block;
position: absolute;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
background: linear-gradient(45deg, #000066 0%, #ccc 100%);
z-index: -1;
// 疑似要素のradius数値
border-radius: 11px;
}疑似要素につけるborder-radiusの数値は、borderの太さ分を足した数をつけましょう。
今回の実装では、3pxの太さのborderを表示しています。
8pxのborder-radiusをつけたいと思ったら、疑似要素の方には「8px+3px」の11pxをつけるということです。
これでdivタグの要素、疑似要素に対して角丸が良い感じに表示することができました！
【方法➂】CSSでborderをグラデーション表示する方法【要素を重ねる｜角丸〇】
３つ目の方法が、要素を重ねてグラデーションがかかったborderを表示するやり方です。
そんなサンプルがこちらになります。
See the Pen ➂borderグラデーション by jito-coder (@jito-coder) on CodePen.
紺色から灰色にグラデーションがかかったborderになっていますよね。
角丸も実装可能です。
<div class="border">
<div class="border__box">
ボーダーグラデーション
</div>
</div>.border {
width: 100%;
position: relative;
padding: 3px;
background: linear-gradient(45deg, #000066 0%, #ccc 100%);
}
.border__box {
padding: 20px;
background-color: #fff;
}この作成方法の手順がこちら↓
- 新たにdivタグを作成して囲む
- 親要素のdivタグにグラデーション背景色を指定
- 子要素のdivタグに中身の背景色を指定
- 角丸をつける場合はborder-radiusの数値を工夫
順に見ていきましょう！
まず新たにdivタグを作成して入れ子にしましょう。
<div class="border">
<div class="border__box">
ボーダーグラデーション
</div>
</div>次に入れ子にした親要素divタグに対して、グラデーション背景色を指定します。
この色がグラデーションのborderの役割を示しますよ。
.border {
width: 100%;
position: relative;
// borderの太さの数値になる
padding: 3px;
// borderのグラデーション色になる
background: linear-gradient(45deg, #000066 0%, #ccc 100%);
}そしてpaddingを指定。このpaddingの数値がborderの太さを示します。
そして子要素のdivタグに中身の背景色を指定します。
.border__box {
padding: 20px;
background-color: #fff;
}色を指定しないと、中身もグラデーションの背景になってしまいますからね。
この時点でグラデーションのborderの実装は完成です！
最後に角丸をつける場合は、border-radiusを指定してあげましょう。
とはいっても数値に工夫が必要です。
<div class="border02">
<div class="border02__box">
ボーダーグラデーション
</div>
</div>.border02 {
width: 100%;
position: relative;
padding: 3px;
background: linear-gradient(45deg, #000066 0%, #ccc 100%);
border-radius: 10px;
}
.border02__box {
padding: 20px;
background-color: #fff;
// border02の「border-radisu数値 - paddingの数値」を指定
border-radius: 7px;
}子要素の角丸数値は親要素divタグの「border-radiusの数値 – paddingの数値」を入れてあげます。
今回でいうと親要素に、角丸10px・太さ3pxを指定しました。
つまり子要素には10px – 3px の7pxをborder-radiusに指定します。
これで綺麗なグラデーションがかかったborderを作成することができました！
【解説】CSSでborderをグラデーションする方法３選【角丸もOK】：まとめ
- 方法①：border-image｜角丸は✕
- 方法②：疑似要素を使う｜角丸は〇
- 方法➂：要素を重ねる｜角丸は〇
グラデーションがかかったborderはよく実装するので覚えておこう！
