border-top-color：要素の上辺に表示される境界線の色を指定する

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

border-top-colorは、要素の上辺に表示される境界線の色を指定します。上下左右の境界線の色を一括で指定する場合はborder-colorを、上辺の境界線の種類や太さも一括で指定する場合はborder-topを使用して下さい。

このプロパティは、かなり限定的な箇所を対象としているため使う機会はそう多くありません。しかし、全体で指定した境界線のスタイルを、特定の場所で個別に上書きしたい時などに有効な手段となりえます。逆に言うと、こういった具体的な機能がパーツとして組み込まれているのがショートーハンド・プロパティです。

ほかの辺の境界線の色を指定する場合は、以下のいずれかのプロパティを使用して下さい。

• border-top-color：上辺の境界線の色を指定する
• border-right-color：右辺の境界線の色を指定する
• border-bottom-color：下辺の境界線の色を指定する
• border-left-color：左辺の境界線の色を指定する

border-top-colorに指定できる値

<color>

CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。初期値はcurrentcolorです。詳細を以下に示します。

キーワード値

特定の色を表すキーワードです。例えば、赤はred、青はblueのように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。

currentColor

要素のcolorプロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。

16進数値

16進数の文字列（0〜9, A〜F）を使った表記です。先頭にシャープ（#）を置き、６桁または３桁で表現します。透明度を表す場合はアルファチャネルを追加し、８桁または４桁で表現します。例えば、赤を表現する場合、#ff0000または#f00となります。

RBG値

光の三原色（赤、青、緑）の分量でsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文はrgb()またはrgba()です。

HSL値

色相（H）、彩度（S）、明度（L）の各成分によって与えられたsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文はhsl()またはhsla()です。

システム色

ブラウザ側で用意してあるパレットを呼び出す祭に指定します。システム色はベンダーが公開しているキーワードを使います。ただし、全てのブラウザが対応しているわけではないので、使用する場面は限定的です。

border-top-colorの使い方とサンプル

border-top-colorプロパティの構文は以下の通りです。

/* キーワード値 */
border-top-color: cyan;
border-top-color: magenta;
border-top-color: yellow;
border-top-color: black;

/* 16進数値 */
border-top-color: #ffffff;    /* 不透過 */
border-top-color: #fff;       /* 不透過の短縮形 */
border-top-color: #ffffffaa;  /* アルファ値の追加 */
border-top-color: #fffa;      /* アルファ付きの短縮形 */

/* RGB 値 */
border-top-color: rgb(255, 255, 255);  /* 不透過の白 */
border-top-color: rgba(0, 0, 0, 0.5);  /* 半透明の黒 */

/* HSL 値 */
border-top-color: hsl(240, 100%, 50%);  /* 不透過の青 */
border-top-color: hsla(0, 0%, 25%, .5); /* 半透明の灰色 */

/* 特殊なキーワード値 */
border-top-color: currentcolor;
border-top-color: transparent;

/* グローバル値 */
border-top-color: inherit;
border-top-color: initial;
border-top-color: revert;
border-top-color: unset;

border-top-colorの実例

それでは簡単な例を見てみましょう。ここでは、borderで要素に共通のスタイルを与え、その色だけを上書きした時の挙動を確かめます。

.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	border: 5px solid #333;
}
#border_1 {
	border-top-color: initial;
}
#border_2 {
	border-top-color: red;
}
#border_3 {
	border-top-color: #0c0;
}
#border_4 {
	border-top-color: rgba(0, 153, 255, .5);
}

<section class="samp_box">
	<p>border-top-color</p>
	<div id="border_1">initial</div>
	<div id="border_2">red</div>
	<div id="border_3">#0c0</div>
	<div id="border_4">rgba(0, 153, 255, .5)</div>
</section>