border-color: ***; border-***-color: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

border-color と border-***-color は、境界線の色を指定するプロパティです。

  • border-color … 上下左右の境界線の色を一括で指定
  • border-***-color … 上下左右の境界線の色を個別に指定 （*** の部分には、top、right、bottom、left が入ります）

上記のように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。


div.example1 {
border-width: thick;
border-color: #ff0000;
border-style: solid;
}

div.example2 {
border-width: thick;
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
border-style: solid;
}

border-color … 上下左右を一括で指定

プロパティ名 値 説明
border-color 色 上下左右の境界線の色を指定

colorプロパティの値が初期値となります。

次のように、4タイプの指定方法があります。それぞれの値は、半角スペースで区切って記述します。

  • border-color: #85b9e9; … ［上下左右］ を指定
  • border-color: #85b9e9 #bde9ba; … ［上下］ と ［左右］ を指定
  • border-color: #85b9e9 #bde9ba #ffd37d; … ［上］ と ［左右］ と ［下］ を指定
  • border-color: #85b9e9 #bde9ba #ffd37d #d1d1d1; … ［上］ と ［右］ と ［下］ と ［左］ を指定

border-***-color … 上下左右を個別に指定

プロパティ名 値 説明
border-top-color 色 上の境界線の色を指定
border-right-color 色 右の境界線の色を指定
border-bottom-color 色 下の境界線の色を指定
border-left-color 色 左の境界線の色を指定

colorプロパティの値が初期値となります。

各プロパティの値には、transparent（透明）を指定することもできます。（ただし、IE 6以下ではこの値に対応していないようです）

色の指定については、CSSの色指定をご覧ください。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

h1, h2, span {
border-width: thick;
border-style: solid;
}

h1 {
border-color: #ff0000;
}

h2 {
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
}

span {
border-color: #ff0000 transparent;
}

</style>

</head>
<body>

<h1>赤い境界線</h1>

<h2>上下左右に異なる色を指定</h2>

<p>左右の<span>境界線</span>を透明にします。</p>

</body>
</html>
表示例

赤い境界線

上下左右に異なる色を指定

左右の境界線を透明にします。