【border-top-color】上のボーダー(枠線)の色を指定

border-top-colorプロパティでは、上のボーダー(枠線)の色を個別に指定することができます。 ボーダーの色を指定しない場合は、colorプロパティの色が適用されます。

また上下左右のボーダーの色をまとめて指定したい場合は、border-colorプロパティを使用して下さい。

なおボーダーは、線の種類の初期値が「none」となっているため、border-top-colorで色を指定しただけではボーダーは表示されません。 border-top-colorを使用する場合は、併せてボーダーの種類(border-style)を指定し、「none」「hidden」以外の値にします。

書式

  • border-top-color : ……… 上のボーダーの色を個別に指定

★:色、transparent、inherit

RGB値、または「red」などのカラーネームで色を指定します。色についてはカラーコード一覧を参照下さい。
transparent
ボーダーの幅をそのまま確保し、色を透明にします。

使用した時の例

div{border-style:solid;}

.sample1 {border-top-color: #F48282;}
.sample2 {border-top-color: blue;}
.sample3 {border-top-color: transparent;}
<div>border-top-colorを指定しない場合</div>
<div class="sample1">上のボーダーの色を#F48282に指定。</div>
<div class="sample2">上のボーダーの色をblueに指定。</div>
<div class="sample3">上のボーダーをtransparentに指定。</div>

ブラウザ上の表示例

border-top-colorを指定しない場合
上のボーダーの色を#F48282に指定。
上のボーダーの色をblueに指定。
上のボーダーをtransparentに指定。

対応ブラウザなどのデータ

初期値 colorプロパティの値 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報