border-right-color
右辺の罫線の色を指定するプロパティ。
border-colorは4辺の罫線の色を指定するのに対し、border-right-colorは4辺のうちの右辺のみに指定が反映される。(他の1辺のみ指定する場合は、border-top-color(上右)、border-bottom-color(下)、border-left-color(左)を利用する。)
16進数によるカラーコード、個別のカラーネーム、RGB値のいずれかを値にすることで、罫線の色を指定することができる。
値
border-colorの解説ページ参照
使用例
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA {
border-right-style:solid;
border-right-width:5px;
border-right-color:#0000ff;
}
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
カラーコード#0000ffを指定
border-rightプロパティで指定]
.sampleA { border-right:solid 5px #0000ff; }
サンプル(B)
[CSSの記述]
.sampleB {
border-right-style:solid;
border-right-width:5px;
border-right-color:green;
}
[HTMLの記述]
<p class="sampleB">テキストテキスト</p>
[ブラウザ上の表示]
カラーネーム「green」を指定
border-rightプロパティで指定]
.sampleB { border-right:dsolid 5px green; }
サンプル(C)
[CSSの記述]
.sampleC {
border-right-style:solid;
border-right-width:5px;
border-right-color:rgb(255,0,0);
}
[HTMLの記述]
<p class="sampleC">テキストテキスト</p>
[ブラウザ上の表示]
RGB値「255,0,0」を指定
border-rightプロパティで指定]
.sampleC { border-right:solid 5px rgb(255,0,0); }
- 前の記事:border-right-width
- トップに戻る:カテゴリトップ / サイトトップ
