border-color

外枠の色を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

・「上下左右」を指定

要素[.class名][#id名]{ border-color : 値; }

・「上下 左右」を指定

要素[.class名][#id名]{ border-color : 値 値; }

・「上 左右 下」を指定

要素[.class名][#id名]{ border-color : 値 値 値; }

・「上 右 下 左」を指定

要素[.class名][#id名]{ border-color : 値 値 値 値; }

▲PageTop

指定できる値

値 初期値 意味
transparent 当該要素は透明となり、上位の要素で指定されている色になります。
16進数表記・色名 指定したカラーコード・色名が線の色になります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
        #sample1 {
          border-color : red;
        }
        #sample2 {
          border-color : red blue;
        }
        #sample3 {
          border-color : red blue green;
        }
        #sample4 {
          border-color : red blue green yellow;
        }
        #sample div {
          border-style : solid;
          border-width : 10px;
          padding : 5px;
          width : 50%;
        }
    </style>
  </head>
  <body>
    <div id="sample">
      値を1つ指定した場合
      <div id="sample1">【 border-color : red 】</div>
      <br>
      値を2つ指定した場合
      <div id="sample2">【 border-color : red blue 】</div>
      <br>
      値を3つ指定した場合
      <div id="sample3">【 border-color : red blue green 】3</div>
      <br>
      値を4つ指定した場合
      <div id="sample4">【 border-color : red blue yellow 】</div>
    </div>
  </body>
</html>

表示結果

値を1つ指定した場合
【 border-color : red 】

値を2つ指定した場合
【 border-color : red blue 】

値を3つ指定した場合
【 border-color : red blue green 】

値を4つ指定した場合
【 border-color : red blue green yellow 】

▲PageTop

関連項目

CSS

border-style / border-width

▲PageTop

▲