CSS ボーダーカラー属性

定義と用法

border-color 属性は4つの枠線の色を設定します。この属性は1から4つの色を設定できます。

border-color 属性はショートカット属性で、要素のすべての枠線の見える部分の色を設定したり、4つの枠線ごとに異なる色を設定できます。以下の例をご覧ください：

例 1

border-color:red green blue pink;
  • 上辺は赤色です
  • 右端の枠線は緑色です
  • 下辺は青色です
  • 左辺はピンク色です

例2

border-color:red green blue;
  • 上辺は赤色です
  • 右辺と左辺は緑色です
  • 下辺は青色です

例3

border-color:dotted red green;
  • 上辺と下辺は赤色です
  • 右辺と左辺は緑色です

例4

border-color:red;
  • すべての4つの辺は赤色です

覚えておくべきことは、辺のスタイルがnoneやhiddenでないことです。そうでないと辺は表示されません。

注釈：常にborder-style属性をborder-color属性よりも前に宣言してください。要素は色を変更する前に辺を取得する必要があります。

参照もしてください：

CSSチュートリアル：CSS 边框

HTML DOMリファレンスマニュアル：borderColor属性

例

4つの辺の色を設定：

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

実際に試してみてください

CSS文法

border-color: color|transparent|initial|inherit;

属性値

値 説明
color_name 色名を指定する辺の色を規定します（例：red）。
hex_number 十六進値の色値を指定する辺の色を規定します（例：#ff0000）。
rgb_number rgbコードの色値を指定する辺の色を規定します（例：rgb(255,0,0)）。
transparent デフォルト値。辺の色は透明です。
inherit 親要素から辺の色を継承するべきです。

技術的詳細

デフォルト値： not specified
継承性： no
バージョン： CSS1
JavaScript文法： object.style.borderColor="#FF0000 blue"

さらに多くの例

4つの辺の色を設定
この例では、4つの辺の色を設定する方法を示しています。1から4つの色を設定できます。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

注釈：Internet Explorer 6（およびそれ以前のバージョン）では属性値"transparent"がサポートされていません。

注釈：IE7およびそれ以前のブラウザでは値"inherit"がサポートされていません。IE8では!DOCTYPEが必要です。IE9では"inherit"がサポートされています。