CSSボーダーカラープロパティ

❮前へ完全なCSSリファレンス次へ❯

例

境界線の色を設定します。

div {border-color: coral;}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このborder-colorプロパティは、要素の4つの境界線の色を設定します。このプロパティには、1〜4個の値を指定できます。

border-colorプロパティに4つの値がある場合：

ボーダーカラー：レッドグリーンブルーピンク;
- 上部の境界線は赤です
- 右の境界線は緑色です
- 下の境界線は青です
- 左のボーダーはピンクです

border-colorプロパティに3つの値がある場合：

ボーダーカラー：赤緑青;
- 上部の境界線は赤です
- 左右の境界線は緑色です
- 下の境界線は青です

border-colorプロパティに2つの値がある場合：

ボーダーカラー：赤緑;
- 上と下の境界線は赤です
- 左右の境界線は緑色です

border-colorプロパティに1つの値がある場合：

ボーダーカラー：赤;
- 4つの境界線はすべて赤です

注：プロパティの前に必ずborder-styleborder-colorプロパティを宣言してください。色を変更する前に、要素に境界線が必要です。

デフォルト値：	要素の現在の色
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSS1
JavaScript構文：	object .style.borderColor = "＃FF0000 blue"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
border-color	1.0	4.0	1.0	1.0	3.5

CSS構文

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

プロパティ値

Value	Description	Play it
color	Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element
transparent	Specifies that the border color should be transparent
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

HEX値で境界線の色を設定します。

div {border-color: #92a8d1;}

例

RGB値で境界線の色を設定します。

div {border-color: rgb(201, 76, 76);}

例

RGBA値で境界線の色を設定します。

div {border-color: rgba(201, 76, 76, 0.3);}

例

HSL値で境界線の色を設定します。

div {border-color: hsl(89, 43%, 51%);}

例

HSLA値で境界線の色を設定します。

div {border-color: hsla(89, 43%, 51%, 0.3);}

例

要素の両側に異なる境界線の色を設定します。

div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}

CSSリファレンス

CSS Properties