最終更新日 2021年6月5日

border-colorプロパティ

border-colorプロパティは、上下左右の罫線の色をまとめて設定するためのもので、値を4個指定した場合、4つの値は、上、右、下、左の罫線の色をそれぞれ順に表します。

・値が3個の場合は、左右の罫線が同じ値を示す
・値が2個の場合は、上下、左右の罫線がそれぞれ同じ値を示す
・値が1個の場合は、上下左右の罫線がすべて同じ値を示す

CSS3での変更点

・値に、RGBA値、HSL値、HSLA値、transparent、currentColorが追加されました。

初期値	適用先	継承
各プロパティの初期値	すべての要素	なし

値	説明
RGB値（16進数）	R、G、Bそれぞれの割合を16進数の2桁で示します。WEBセーフカラーは1桁に省略する事も可能です。
RGB値（10進数）	R、G、Bそれぞれの割合を「0～255」までの10進数の数値で示します。
RGB値（%）	R、G、Bそれぞれの割合をパーセント値で示します。
RGBA値（10進数）	RGB値の10進数表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。
RGBA値（%）	RGB値のパーセント表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。
HSL値	H（色相）S（彩度）L（明度）という3つの属性を使って色を表す方法です。H（Hue:色相）は、色を環状で表す色相環の角度を示す数値で指定します。0は赤、120は緑、240は青になります。S（Saturation:彩度）は、色の鮮やかさをパーセント値で指定します。100%は彩度がもっとも高い純色で、0%は彩度のない無彩色です。L（Lightness:明度）は、色の明るさを0%～100%までのパーセント値で指定します。50%は純色を示します。
HSLA値	HSLの表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。
基本色	CSS3で定義されている、black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aquaの16色です。アルファベットの大文字と小文字は区別されません。
拡張色	一般的なブラウザが対応している「X11カラー」の色名です。CSS3カラーモジュールでは、X11カラー140色に加え、darkgray、darkslategray、dimgray、gray、lightgrey、lightslategray、slategrayの7色については、「gray」と「grey」のどちらのスペルでも利用できるようになり、合計147色のカラーネームが正式に定義されています。
transparent	完全な透過色を示します。rgba(0,0,0,0)と指定した場合と同じです。
currentColor	要素のcolorプロパティの値を示します。色の値を受け取る全てのプロパティで使用できます。colorプロパティ自身にcurrentColorを指定した場合は「color:inherit」として扱われ、親要素のカラー値を受け継ぎます。

サンプルコード

border-color: #f00;
border-color: #f00 #f00;
border-color: #f00 #f00 #f00;
border-color: #f00 #f00 #f00 #f00;

参考文献：CSS Backgrounds and Borders Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。