border-color
罫線の色を指定するプロパティ。
16進数によるカラーコード、個別のカラーネーム、RGB値のいずれかを値にすることで、罫線の色を指定することができる。
値
| カラーコード | #000000～#ffffffのカラーコードを指定 |
|---|---|
| カラーネーム | black、white等個別のカラーネームを指定 |
| 色 | rgb(0,0,0) ～ rgb(255,255,255）のRGB値を指定 |
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA {
border-style:solid;
border-width:5px;
border-color:#0000ff;
}
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
カラーコード#0000ffを指定
borderプロパティで指定]
.sampleC { border:solid 5px #0000ff; }サンプル(B)
[CSSの記述]
.sampleB {
border-style:solid;
border-width:5px;
border-color:green;
}
[HTMLの記述]
<p class="sampleB">テキストテキスト</p>
[ブラウザ上の表示]
カラーネーム「green」を指定
borderプロパティで指定]
.sampleC { border:solid 5px green; }サンプル(C)
[CSSの記述]
.sampleC {
border-style:solid;
border-width:5px;
border-color:rgb(255,0,0);
}
[HTMLの記述]
<p class="sampleC">テキストテキスト</p>
[ブラウザ上の表示]
RGB値「255,0,0」を指定
borderプロパティで指定]
.sampleC { border:solid 5px rgb(255,0,0); }- 前の記事：border-width
- 次の記事：border-top