属性名 | border-width |
---|---|
値 | [ <length> | thin | mediun | thick ]{1,4} |
初期値 | medium |
適用可能要素 | すべて |
継承 | 継承しない |
メディア | visual |
アニメーション | 可能 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS1 | 4 | 1 | 1 | 3.5 | 1 |
ボーダーラインの太さを指定します。
値 | 説明 |
---|---|
<length> | 線の太さを指定します。詳細は <length> を参照してください。 |
thin | 細い線にします。 |
medium | 中程度の線にします。 |
thick | 太い線にします。 |
値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。右を省略すると上と同じ値になります。
border-width: 1px; /* 上:1px、右:1px、下:1px、左:1px */ border-width: 1px 2px; /* 上:1px、右:2px、下:1px、左:2px */ border-width: 1px 2px 3px; /* 上:1px、右:2px、下:3px、左:2px */ border-width: 1px 2px 3px 4px; /* 上:1px、右:2px、下:3px、左:4px */
.sample { border-width: 3px; border-color: red; border-style: solid; height: 32px; width: 120px; margin: 1em; }
<div class="sample"></div>