【CSS】グラデーションのボーダーの角丸（円）が作れない！？【解決法】

こんにちは、ワタナベです！

今回はグラデーションのボーダーで角丸（円）にしたい時の方法の備忘録。

ボーダーをグラデーションにしたい時は「border-image」を使うのですが、なんと「border-image」には、角丸にする「border-radius」が使えません｡°(°´ᯅ°)°｡


しかし、疑似的な解決策はあります！
SAMPLE
See the Pen 

Untitled by Akiho (@wcaotdaenpaebne)

on CodePen.

↑サンプル、上が「border-image」で角丸にしようとして失敗したもの、下が疑似的に角丸（円）にしたものです。ご覧の通り上は角丸が効いていません…(´っ;ω;c)

こちらの解決方法としては、「background」を使用した方法になります。
グラデーション背景に設定したdivの中に、白背景のdivを作ります！paddingで太さを調整して出来上がりです。

※円だとどちらのdivも「border-radius:50%」で問題ありませんが、50%未満の角丸ですと外側と内側でそれぞれ調整が必要になってきます。

「background」を使った方法だと内側の背景が透過じゃなくなってしまいますが、CSSで再現するのだったらこれが最善策かな…と思います！

▼THANKS！

それではまた次回。

ご閲覧ありがとうございました(˶′◡′˶)♪