Title

border-colorとは

ここで説明するborder-color とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 境界線

color

読み: カラー
意味: 色

目次に戻る

border-colorプロパティの概要

このプロパティは要素の境界線の色を指定することができます。

border-colorプロパティは次に挙げる個別プロパティの設定を一括で設定する機能を有します。

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

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{border-color: 四辺の色}
セレクター{border-color: 上下辺の色 左右辺の色}
セレクター{border-color: 上辺の色 左右辺の色 下辺の色}
セレクター{border-color: 上辺の色 左辺の色 右辺の色 下辺の色}

※ コードの各辺の色と色の間には半角スペースが必要です。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルにはdiv要素を使用しています。 border-colorプロパティを使ってdiv要素の境界線の色を指定してみたいと思います。 また、境界線は線の種類であるborder-styleプロパティは初期値がnoneとなっており、このままでは境界線は表示されませんので、 border-styleにsolidキーワードを指定しておきます。

初期値: currentColor

初期値のcurrentColorキーワードは、 ユーザーエージェントの既定色で境界線が表示されます。 つまりブラウザで決まっている標準の色が使われるということです。

div{
	border-style: solid;
	border-color: currentColor;
}

目次に戻る

キーワード値: カラーキーワード

境界線の色を指定する場合W3Cで定義されているカラーキーワードを使って色を指定することができます。

ここでは、orange(オレンジ)を使用しています。 詳しくは、 色見本 (カラーサンプル) のページを参照してください。

div{
	border-style: solid;
	border-color: orange;
}

目次に戻る

16進数: 16進数のカラーコード

16進数 とは私たちが普段、数学などで使っているアラビア数字の0~9にA~Fを付け加えた数字です。 アラビア数字は0から数えて9の次の10で位が上がりますが、16進数では9の次からABCDEFと数えていき、最後のFが16番目の 数字となります。つまりFはアラビア数字でいうところの15を表すことになります。

16進数で色を表す場合はカラーコードの先頭に「#」を付けます。

色の指定方法は #XXYYZZ を例とすると XXの部分が赤色の明るさ, YYの部分が緑色の明るさ, ZZの部分が青色の明るさ の形式で 0~F の数字をあてはめて指定します。 なお、指定した数字が大きいほど、明るくなります。

16進数で色を指定する場合には2種類の書き方があります。#000と#000000はどちらも16進数のカラーコードです。 #000は16進数のカラーコードの短縮系となり、指定できる色の幅が少し大雑把になります。

カラーコードに大文字と小文字の区別はありませんので、例えば#FFFと書いても#fffと書いても同じ意味になります。

詳しくは、 色見本 (カラーサンプル) のページを参照してください。

div{
	border-style: solid;
	border-color: #F00;
}
div{
	border-style: solid;
	border-color: #FF0000;
}

目次に戻る

関数: rgb関数で色を指定する

rgb関数は引数に指定した数値をもって処理したカラーコードを返してくれる関数です。

RGB とはRed,Green,Blueの頭文字をとったもので赤と緑と青の色の混合比を使って色を指定します。 この考え方は16進数で色を指定する場合と同じです。

rgb( 赤, 緑, 青) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示されます。

詳しくは、 色見本 (カラーサンプル) のページを参照してください。

div{
	border-style: solid;
	border-color: rgb(0,255,0);
}

目次に戻る

関数: rgba関数で色を指定する

rgba関数はrgb関数と同じく、引数に指定した数値をもって処理したカラーコードを返してくれる関数ですが、 rgb関数よりも引数が一つ多く、最後の引数で色の透過率を設定することができる関数です。 つまり、背後の要素やテキストが透けた状態を表現することができるということです。

RGBA とはRed,Green,Blue,Alphaの頭文字をとったもので前項で挙げたRGBに透過度であるAlpha値を指定することができます。

rgba( 赤, 緑, 青, 透過率) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示され、 かつ、透過度を設定することで指定した色に透明度を設定します。

詳しくは、 色見本 (カラーサンプル) のページを参照してください。

div{
	background-clip: padding-box;
	border-width: 20px;
	border-style: solid;
	border-color: rgba(0,255,0,0.5);
}

ボーダー色の指定にrgba関数を使って透過色を使用する場合には、 background-clipプロパティの値を初期値のborder-boxから変更する必要があります。 ここではpadding-boxという値を指定しています。詳しくは background-clip (バックグラウンドクリップ) のページを参照してください。

目次に戻る

グローバル値

border-colorプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のcurrentColorに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-color: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-color: currentColor;

border-color: orange;

border-color: #00FF00;

border-color: rgb(0,200,200);

border-color: rgba(0,200,200.0.5);

border-color: red green;

目次に戻る