構文

border-width : 上線幅 右線幅 下線幅 左線幅;
border-top-width : 線幅;
border-bottom-width : 線幅;
border-left-width : 線幅;
border-right-width : 線幅;

説明文

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

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

　枠線の幅はピクセル数（px）のほかに，細線を表す「thin」，中太線を表す「medium」，太線を表す「thick」を指定できる。また，「0px」と指定すると枠線は引かれない。

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

使用例

● CSSの定義

div { border-width : 2px;
      border-style : solid;
      padding : 5px;
}

h1 { border-top-width : thin;
     border-bottom-width : thick;
     border-left-width : thick;
     border-right-width : thin;
     border-style : solid;
     border-color : #ff8000;
}

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

table { border-collapse: collapse; }

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

● HTMLの例

<h1>枠線の太さを指定する「border-width」</h1>

<div>
  <p>ブロック要素や表などでは枠線で囲むことが可能だ。この枠線の幅を指定す
  るのに「border-width」を利用する。</p>
  <p>また，太さはピクセル数で指定するほか，以下のような太さを表す文字列で
  指定することもできる。</p>
  <hr>
  <table>
  <tbody>
    <tr>
        <td>細線</td>
        <td>thin</td>
    </tr>
    <tr>
        <td>中太線</td>
        <td>midium</td>
    </tr>
    <tr>
        <td>太線</td>
        <td>thick</td>
    </tr>
  </tbody>
  </table>
</div>

● 表示結果

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

border-widthの一括指定

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

border-width : 5px;

と指定すれば，上下左右全ての枠線の太さが5pxとなる。

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

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

　例えば，以下のように指定すれば，枠線の太さが上5px，下に1px，左右に10pxのとなる。

border-width : 5px 10px 1px;

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

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

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

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

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

関連項目