border-colorプロパティ

TOPページに戻る > CSS

border-colorプロパティ

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

使い方（書式）

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

border-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	枠線を透明にする。トランスパレント

値の数	説明
値が1つ	「上下左右」の枠線の色を一括で指定する
値が2つ	「上下」「左右」 1つ目が上下、2つ目が左右の枠線の色
値が3つ	「上」「左右」「下」 1つ目が上、2つ目が左右、3つ目が下の枠線の色
値が4つ	「上」「右」「下」「左」 1つ目が上、2つ目が右、3つ目が下、4つ目が左の枠線の色

実際の指定方法

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

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

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

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

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

html部分

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

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

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

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

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

実際の表示

border-color: #FF9900;

border-color: #F90;

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

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

border-color: red;

複数の値の指定方法

値を複数指定すると辺ごとに枠線の色を指定できます

css

p.hoge10 {
 border-style: solid;      /* 要素の枠線を実線で表示 */
 border-color: #F90 #6F0;  /* 要素の上下の枠線が#F90、左右が#6F0 */
 }

p.hoge11 {
 border-style: solid;          /* 要素の枠線を実線で表示 */
 border-color: #F90 #6F0 #00F; /* 要素の上の枠線が#F90、左右が#6F0、下が#00F */
 }

p.hoge12 {
 border-style: solid;               /* 要素の枠線を実線で表示 */
 border-color: #F90 #6F0 #00F #600; /* 要素の上の枠線が#F90、右が#6F0、下が#00F、左が#600 */
 }

html部分

<p class="hoge10">border-color: #F90 #6F0;</p>

<p class="hoge11">border-color: #F90 #6F0 #00F;</p>

<p class="hoge12">border-color: #F90 #6F0 #00F #600;</p>

実際の表示

border-color: #F90 #6F0;

border-color: #F90 #6F0 #00F;

border-color: #F90 #6F0 #00F #600;