構文

border-color : 上線色 右線色 下線色 左線色;
border-top-color : 線色;
border-bottom-color : 線色;
border-left-color : 線色;
border-right-color : 線色;

説明文

　ブロック要素や表などのボックスに要素本体を納めるタグについては，要素の外枠に枠線で囲むことができる。スタイルシートの「border-color」では枠線の色を指定できる。また，水平線の<hr>タグについても指定できる。

　枠線は上下左右独立した色を指定することが可能となっている。「border-top-color」では上側，「border-bottom-color」では下側，「border-left-color」では左側，「border-right-color」では右側の枠線の色を指定する。また，「border-color」にて全ての枠線を一括して設定できる（詳しくは同ページの「border-colorの一括指定」を参照）。

　枠線の色は各色を16進数で表して列挙する方法（#ff0000など）のほか，「red」や「blue」などといった色名で指定することもできる。

[画像のクリックで拡大表示]

使用例

● CSSの定義

div { border-color : #800000;
      border-width : 5px;
      border-style : solid;
      padding : 5px;
}

h1 { border-color : red yellow green blue;
     border-width : 5px 10px;;
     border-style : solid;
}

hr { border-color : #0000ff;
     border-width : 5px;
     border-style : dotted none none none;
}

table { border-collapse: collapse; }

td { border-color : #000000;
     border-width : 1px;
     border-style : solid;
     padding : 2px;
}

● HTMLの例

<h1>枠線の色を指定する「border-color」</h1>

<div>
  <p>ブロック要素や表などでは枠線で囲むことが可能だ。この枠線の色を指定す
  るのに「border-color」を利用する。</p>
  <p>また，色は16進数で指定する方法のほか，以下のような色名で指定すること
  もできる。</p>
  <hr>
  <table>
  <tbody>
    <tr>
        <td>青</td>
        <td>blue</td>
    </tr>
    <tr>
        <td>赤</td>
        <td>red</td>
    </tr>
    <tr>
        <td>緑</td>
        <td>green</td>
    </tr>
  </tbody>
  </table>
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

border-colorの一括指定

　「border-color-left」など上下左右の枠線の色を個別に指定するほか，「border-color」を使うことで一度に枠線の色を指定することが可能だ。「border-color」に1つの枠線の色を指定すると上下左右同じ色となる。例えば，

border-color : red;

と指定すれば，上下左右全ての枠線の色が赤になる。

　また，以下のような記述で，各枠線の色を指定できる。

border-color : 全て;
border-color : 上下 左右;
border-color : 上 左右 下;
border-color : 上 右 下 左;

　例えば，以下のように指定すれば，上が赤，下が青，左右が黄色となる。

border-color : red blue yellow;

<hr>タグでの枠線の指定

　<hr>タグで枠線を指定する場合には注意が必要となる。<hr>タグは1本の線で構成し得いるのではなく，ブロック要素のタグと同様に矩形の4本の枠線から構成される。しかし，他のタグとは異なり囲む要素は何も存在せず，4本の枠線がくっついた形となる。そのため，点線などで線を引くと2重の線で引かれてしまう。

[画像のクリックで拡大表示]

　もし，1本の線で枠線を引きたい場合は，上または下の線のみを表示し，そのほかの線を表示しないようにすればよい。下記のスタイルシートの記述では，「border-style」で上の線以外を表示しない「none」を指定することで，上の線のみを表示している。

hr { border-style : dotted none none none;
     border-width : 5px;
     border-color : #ff0000;
}
[画像のクリックで拡大表示]

関連項目