トップページの中の プロパティの中の Bのプロパティ一覧の中の border-top-width, border-right-width, border-bottom-width, border-left-width

border-top-width, border-right-width, border-bottom-width, border-left-width

  • 最終更新:2009年11月 9日 13:48

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

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<border-width>|inherit
初期値
medium
適用される要素
全ての要素
継承
しません
パーセント値
N/A
メディア
visual

<border-width>の解説

thin
細いボーダー
medium
通常のボーダー
thick
太いボーダー
<長さ>
ボーダー幅を指定します。なお、マイナス値は使えません。

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

thin <= medium <= thick

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;
}

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

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

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

このページの上部へ