border-color - 枠線の色をまとめて指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのborder-colorは、枠線の色を、まとめて指定するためのプロパティです。

サンプルコード

border-colorを指定した例です。このプロパティの指定を有効にするには、あらかじめ枠線を用意して下さい。

div {
	border: 20px solid #333 ;
	border-color: #D36015 #2660A1 red rgb( 255, 0, 255 ) ;
}

デモ

上枠の色に茶色(#D36015)、右枠の色に青色(#2660A1)、下枠の色に赤色(red)、左枠の色に紫色(rgb( 255, 0, 255 ))、をまとめて指定した例です。

RUN
HTML
CSS
JavaScript

#element { border: 20px solid #333 ; border-color: #D36015 #2660A1 red rgb( 255, 0, 255 ) ; max-width: 50% ; height: 160px ; line-height: 160px ; text-align: center ; margin: 20px auto 0 ; }

値の指定

基本的に、値には「上枠」「右枠」「下枠」「左枠」の順に、スペースで区切って4つの値を指定します。例えば、red green blue purpleと指定すれば、上枠にred、右枠にgreen、下枠にblue、左枠にpurpleが適用されます。上(12時)から、右回りになる時計と同じです。時計回りということを覚えておきましょう。

応用として、2つの値を指定すると1つ目の値が「上枠」と「下枠」、2つ目の値が「右枠」と「左枠」と、十字の形のように適用されます。縦に斬って、横に斬るイメージです。また、1つの値を指定すると、全ての枠に適用されます。

/* 基本は4つの値を指定する */
/* [1]上 → [2]右 → [3]下 → [4]左 */
#element {
	border-color: red green blue purple ;
}

/* 2つの値を指定すると「上下」「左右」に適用される */
/* [1]上下 → [2]左右 */
#element {
	border-color: red green ;
}

/* 1つの値を指定すると「上下左右」に適用される */
/* [1]上下左右 */
#element {
	border-color: red ;
}

個々の値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-color`には、`body`に指定された値(`#D36015 #2660A1 red rgb( 255, 0, 255 )`)が引き継がれる。`inherit inherit inherit inherit`とする必要はありません。
initial	プロパティの初期値が適用される。この場合、`#000000 #000000 #000000 #000000`となる。`initial initial initial initial`とする必要はありません。
transparent	透明になる。三角形を作るために応用することができる。
color	CSSで許可された方法で、色の指定ができます。Hex(`#D36015`)、RGB(`rgb( 211, 96, 21 )`)、HSL(`hsl( 24, 82%, 46% )`)、KEYWORD(`brown`)など。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明