ボーダーにグラデーション

CSSだけで border-bottom にグラデーションをかけてみよう!

CSSだけで、border-bottom プロパティにグラデーションをかける方法のサンプルを作ってみました。カラーはグラデーションが分かりやすい様に適当につけているので、自由に変更してみてください。Firefoxでは問題なく表示され、IE11も一応表示されています。

border-bottomのグラデーションサンプル

今回、CSSで出来るボーダーグラデーションのサンプルです。

上記のサンプルは、border-bottom のグラデーション部分のみを記載しています。フォントサイズなどは、自由に設定してみてください。


著者について

Junji Yamamoto

広島県広島市育ち、現在岡山でWeb制作の仕事をしています。主に「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。

JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利