1値4辺を同じ色にする
色を1つだけ書くと、上・右・下・左のすべてに適用されます。
border-color
要素の4辺にある境界線の色をまとめて指定するプロパティ。上・右・下・左を個別に変え、値の数と適用先を比べます。
CSSのborder-colorとは？
境界線の上・右・下・左の色をライブプレビューで変えながら、1〜4値の順番、currentColor、線が見える条件を初学者向けに解説します。
遊んでみよう
1〜4値を上から時計回りに配置
上右下左border-color
CSS
.element border-color: #7258e8;
値のパターン
border-colorの構成要素
2〜3値対向の辺で色を共有する
2値は上下／左右、3値は上／左右／下の順です。左右は同じ色を使います。
4値上から時計回りに指定する
4つの色は上・右・下・左の順で、上辺から時計回りに対応します。
早見表
値の数で、どの辺へ色を配るかが変わります。上辺から時計回りと覚えます。
01
red4辺すべてを同じ色にする1値02
red blue上下をred、左右をblueにする2値03
red blue green上・左右・下の順に配る3値04
red blue green gold上・右・下・左の順に配る4値05
currentColor要素のcolorと同じ色を使う初期値06
transparent線の領域を保ったまま透明にする透明よくある使い方
01
カードの境界を薄い色で整える
borderで太さと線種を決めたカードに、背景と見分けられる境界色を加えます。
.card { border-color: #d8d5cc; }02
入力欄のフォーカスを色と外枠で示す
境界線の色を変えつつoutlineも残し、キーボード操作でも現在位置が分かるようにします。
.field:focus { border-color: #7258e8; }03
左辺だけ状態色を変える
ほかの辺をtransparentにし、左側の色だけで補足や状態の方向を強調できます。
.notice { border-color: transparent transparent transparent #0f735f; }ポイント
色だけでは、border-styleがnoneの線は見えない。
border-colorの各辺の初期値はcurrentColorで、要素のcolorを参照します。すべての要素と::first-letterに適用できますが、子要素へは継承されません。境界線を見せるにはborder-styleをnone以外にし、必要なborder-widthも指定します。transparentは線の色を透明にしますが、境界線の幅は残ります。色の変化は中間色を通ってアニメーションできますが、状態を色だけで伝えないようにします。
関連するCSSも見てみよう。
border-color と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。