border-bottom-colorプロパティ

TOPページに戻る > CSS

border-bottom-colorプロパティ

HTML要素の下の枠線の色を指定できます
border-bottom-colorプロパティの値は、色を指定する16進数、10進数、rgb、色のキーワードです
border-styleプロパティで枠線の種類を指定していないと色をつけても枠線が表示できません。枠線のスタイルの初期値がnone（枠線なし）に設定されているためです
border-bottom-colorプロパティを使わずに枠線の色を指定しなかった場合、下の枠線の色は文字の色になります

使い方（書式）

セレクタ { border-bottom-color: 値; }                                    

border-bottom-colorプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
16進数	#と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します。 例 #FF9900
16進数（3桁）	#FF9900を省略して#F90と指定することもできます
10進数 rgb	赤、緑、青の三原色を0から255までの10進数で指定 rgb(255, 128, 0)　この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定
10進数 rgb %	三原色のパーセントで指定 rgb(100%, 50%, 0%)　この場合は100%が赤の色の指定、50%が緑の色の指定、0%が青色の指定
色のキーワード	red、green、blue、pinkなど色をキーワードで指定
transparent	枠線を透明にする。トランスパレント

実際の指定方法

p.hoge {
 border-bottom-style: solid;    /* 要素の枠線を実線で表示 */
 border-bottom-color: #FF9900;  /* 要素の上の枠線の色を#FF9900に指定 */
 }

p.hoge2 {
 border-bottom-style: solid;    /* 要素の枠線を実線で表示 */
 border-bottom-color: #F90;     /* 要素の下の枠線の色を#F90に指定 */
 }

p.hoge3 {
 border-bottom-style: solid;            /* 要素の枠線を実線で表示 */
 border-bottom-color: rgb(255, 128, 0); /* 要素の下の枠線の色をrgbで指定 */
 }

p.hoge4 {
 border-bottom-style: solid;              /* 要素の枠線を実線で表示 */
 border-bottom-color: rgb(100%, 75%, 0%); /* 要素の下の枠線の色をrgb%で指定 */
 }

p.hoge5 {
 border-bottom-style: solid;    /* 要素の枠線を実線で表示 */
 border-bottom-color: red;      /* 要素の上の枠線の色をキーワードで指定 */
 }

html部分

<p class="hoge"> border-bottom-color: #FF9900;</p>

<p class="hoge2"> border-bottom-color: #F90;</p>

<p class="hoge3"> border-bottom-color: rgb(255, 128, 0);</p>

<p class="hoge4"> border-bottom-color: rgb(100%, 75%, 0%);</p>

<p class="hoge5"> border-bottom-color: red;</p>

実際の表示

border-bottom-color: #FF9900;

border-bottom-color: #F90;

border-bottom-color: rgb(255, 128, 0);

border-bottom-color: rgb(100%, 75%, 0%);

border-bottom-color: red;