| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {border-width: 上の値 右の値 下の値 左の値 } |
| 値 の形式 |
|
| 初 期 値 | medium |
| 対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
border-width プロパティ は，要素の 境界ボックスの上下左右の線の太さ （border-top-width，border-right-width， border-bottom-width，border-left-width）を一括指定します。
すなわち，
上の 1 ～ 4 に示すとおり，値の形式 として， 半角ブランクを挟んで４つまでの値が指定できます。 このとき，
数値による指定は，次のような単位を付けて可能です。
| 単位 | 説 明 |
|---|---|
| px | px とは画面の１画素（ピクセル） のサイズを１とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
| em | em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex | ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| ％ | 親要素の widthプロパティ の値を基準にして割合を％値で指定します。 |
ただし，実際には，境界の太さにそれほど大きな値を指定することは少ないので，"px" を使う場合がほとんどです。
また，"thin"，"medium"，"thick" のキーワードによる指定内容は，次の通りです。
| 値 | 説 明 |
|---|---|
| thin | 細い境界線にします。 |
| medium | 中くらいの標準的な太さの境界線にします。 （初期値） |
| thick | 太い境界線にします。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample {width: 50%; }
p.width1 {border-width: thin; border-style: solid; }
p.width2 {border-width: medium; border-style: solid;}
p.width3 {border-width: thick; border-style: solid;}
p.width4 {border-width: 3px; border-style: solid;}
p.width5 {border-width: 6px; border-style: solid;}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample"> <p class="width1">{border-width: <em>thin</em>} の境界表示</p> <p class="width2">{border-width: <em>medium</em>} の境界表示</p> <p class="width3">{border-width: <em>thick</em>} の境界表示</p> <p class="width4">{border-width: <em>3px</em>} の境界表示</p> <p class="width5">{border-width: <em>6px</em>} の境界表示</p> </div> |
| ブラウザー 表示例 |
|---|
{border-width: thin} の境界表示 {border-width: medium} の境界表示 {border-width: thick} の境界表示 {border-width: 3px} の境界表示 {border-width: 6px} の境界表示 |
上述のとおり，値を３つ指定した場合は，省略された 左のスタイル は 右のスタイル と同スタイルになります。 さらに，値を２つ指定した場合は， 加えて，省略された 下のスタイル は 上のスタイル と同スタイルになります。 値を１つだけしか指定しない場合は，それが 上下左右すべてのスタイルになります。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample3 { width:320px; height:60px; border: solid green; border-width: 2px 4px 6px 9px; } div.sample4 { width:320px; height:60px; border: solid green; border-width: 2px 4px 6px; } div.sample5 { width:320px; height:60px; border: solid green; border-width: 2px 4px; } div.sample6 { width:320px; height:60px; border: solid green; border-width: 2px; } --> </style> |
| HTML <body> ～ </body> |
<div class="sample3"> これが class="sample3" の部分です。 </div> <br> <div class="sample4"> これが class="sample4" の部分です。 </div> <br> <div class="sample5"> これが class="sample5" の部分です。 </div> <br> <div class="sample6"> これが class="sample6" の部分です。 </div> |
| ブラウザー 表示例 | ||||||||
|---|---|---|---|---|---|---|---|---|
|