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