border-colorプロパティの説明
CSSのborder-colorプロパティは、要素の外周に表示される境界線の色を指定します。上下左右の境界線の色を一括で指定できますが、各辺の値を半角スペースで区切って個別に変更することもできます。
border-colorは、border-top-color、border-right-color、border-bottom-color、border-left-colorの値を含むショートハンド・プロパティです。境界線の種類や太さを一括で指定したい場合は、borderを参照して下さい。
border-colorに指定できる値
<color>- CSSで使用できるデータ型の色の指定値です。キーワード、16進数、RGB値、HSL値などが使えます。初期値は
currentcolorです。詳細を以下に示します。 keyword- 特定の色を表すキーワードです。例えば、赤は
red、青はblueのように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。 - currentColor
- 要素の
colorプロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。 - 16進数値
- 16進数の文字列（0〜9, A〜F）を使った表記です。先頭にシャープ（
#）を置き、６桁または３桁で表現します。透明度を表す場合はアルファチャネルを追加し、８桁または４桁で表現します。例えば、赤を表現する場合、#ff0000または#f00となります。 - RBG値
- 光の三原色（赤、青、緑）の分量でsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文は
rgb()またはrgba()です。 - HSL値
- 色相（H）、彩度（S）、明度（L）の各成分によって与えられたsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文は
hsl()またはhsla()です。 - システム色
- ブラウザ側で用意してあるパレットを呼び出す祭に指定します。システム色はベンダーが公開しているキーワードを使います。ただし、全てのブラウザが対応しているわけではないので、使用する場面は限定的です。
border-colorの使い方とサンプルコード
border-colorプロパティの構文は以下の通りです。
/* キーワード値 */
border-color: cyan;
border-color: magenta;
border-color: yellow;
border-color: black;
/* 16進数値 */
border-color: #ffffff; /* 不透過 */
border-color: #fff; /* 不透過の短縮形 */
border-color: #ffffffaa; /* アルファ値の追加 */
border-color: #fffa; /* アルファ付きの短縮形 */
/* RGB 値 */
border-color: rgb(255, 255, 255); /* 不透過の白 */
border-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
/* HSL 値 */
border-color: hsl(240, 100%, 50%); /* 不透過の青 */
border-color: hsla(0, 0%, 25%, .5); /* 半透明の灰色 */
/* 特殊なキーワード値 */
border-color: currentcolor;
border-color: transparent;
/* グローバル値 */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: unset;
border-colorの実例
それでは簡単な例を見てみましょう。ここでは、borderで要素に共通のスタイルを与え、その色だけを上書きした時の挙動を確かめます。
<section class="samp_box">
<p>border-color</p>
<div id="border_1">cyan</div>
<div id="border_2">cyan magenta</div>
<div id="border_3">cyan magenta yellow</div>
<div id="border_4">#08f #04c #004 #004</div>
</section>
.samp_box {
padding: 0 1rem;
text-align: center;
}
.samp_box > div {
margin: 1rem auto 0 auto;
padding: 2rem 1rem;
border: 5px solid;
}
#border_1 {
border-color: cyan;
}
#border_2 {
border-color: cyan magenta;
}
#border_3 {
border-color: cyan magenta yellow;
}
#border_4 {
border-color: #08f #04c #004 #004;
}