各辺のボーダーの幅を個別に指定できるプロパティです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<border-width>｜inherit

初期値

medium

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

<border-width>の解説

thin

細いボーダー

medium

通常のボーダー

thick

太いボーダー

<長さ>

ボーダー幅を指定します。なお、マイナス値は使えません。

thin, medium, thickの太さはUA（ブラウザとか）に依存しますが、必ず以下の関係を守る事になっています。

thin <= medium <= thick

• ボーダーを表示させるには、border-styleプロパティの指定が必要です。

border-width個別指定のサンプル

p {
  margin: 10px;
  padding: 5px;
  border-style: solid;
}

p.sample {
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

ボーダーのサンプルです。