スポンサード リンク
border-colorプロパティ
HTML要素の上下左右の枠線の色をまとめて指定できます使い方(書式)
セレクタ { 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;