| 属性名 | 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>