border-top-color：要素の上辺に設定したボーダー（枠線）の色を指定する

border-top-colorプロパティの説明

border-top-colorは、要素の上辺に設定したボーダー（枠線）の色を指定する際に使用します。このプロパティはあまりにも限定的な値を操作するものであり、実際の制作現場において使用する場面は多くありません。

ボーダーの色を上下左右まとめて指定する場合には、border-colorを使います。上辺のボーダーについて複数のパラメーターをまとめて指定する場合には、border-topを使います。

border-top-colorに与えられる値

border-top-color: キーワード;

[red]や[blue]などのキーワードで指定します。

border-top-color: 値;

16進数などの値で指定します。

border-top-color: transparent;

ボーダーの色を透明にします。

border-top-colorの使用サンプル

.box_sample {
 padding: 5px;
 margin: 0 0 10px 0;
}
.border_1 {
 border-top-width: 3px;
 border-top-style: solid;
 border-top-color: red;
}
.border_2 {
 border-top-width: 3px;
 border-top-style: dashed;
 border-top-color: #0000FF;
}
.border_3 {
 border-top-width: 3px;
 border-top-style: dotted;
 border-top-color: rgb(0,255,0);
}

<div class="box_sample border_1">
border-top-width: 3px;<br>
border-top-style: solid;<br>
border-top-color: red;<br>
</div>

<div class="box_sample border_2">
border-top-width: 3px;<br>
border-top-style: dashed;<br>
border-top-color: #0000FF;<br>
</div>

<div class="box_sample border_3">
border-top-width: 3px;<br>
border-top-style: dotted;<br>
border-top-color: rgb(0,255,0);<br>
</div>