border-top-color, border-right-color, border-bottom-color, border-left-color
各辺のボーダーの色を個別に指定できるプロパティです。
- 対応ブラウザ
-
プロパティの解説
- 値
- <色>|transparent|inherit
- 初期値
- colorプロパティの値
- 適用される要素
- 全ての要素
- 継承
- しません
- パーセント値
- N/A
- メディア
- visual
値の解説
- <色>
- キーワード(red, blueなど)かRGB数値のいずれかで指定できます。
- transparent
-
ボーダー領域を透明にする。この際ボーダー幅は確保されます。
なお、IE6はtransparentに対応していません。
- border-colorの初期値はcolorプロパティで指定されている色が適用されます。
- ボーダーを表示させるには、border-styleプロパティの指定が必要です。
- <色>に関しては、「色の指定に関して」をご参照ください。
border-color個別指定のサンプル
.browserView p {
margin: 10px;
padding: 5px;
border-style: solid;
}
p.sample {
border-top-color: transparent;
border-right-color: green;
border-bottom-color: #006;
border-left-color: green;
}
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
ボーダーのサンプルです。