サイトマップ
トップページ > CSS > プロパティ一覧 > border > border-xxx-width(最終修正日:2007-03-06)

border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティ

border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティの概要
機能 ボーダー(枠線)の太さを上下左右個別に定義
指定可能な値 長さ、thin, medium, thick
初期値 medium
継承 しない
適用可能なボックス 全て

border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティは、要素のボーダー(枠線)の太さを上下左右で個別に定義します。指定できるプロパティの値は、border-widthと同じです。ただし、枠線のスタイルがborder-styleプロパティ等で指定されていなければ、設定は反映されません。


div.thin {
    border-left-style: solid;
    border-left-width: thin;
}
div.medium {
    border-right-style: solid;
    border-right-width: medium;
}
div.thick {
    border-top-style: solid;
    border-top-width: thick;
}
div.width1px {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
div.width4px {
    border-left-style: solid;
    border-right-style: solid;
    border-left-width: 4px;
    border-right-width: 4px;
}
div.width8px {
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 8px;
    border-bottom-width: 8px;
}

確認画面

このプロパティはあまり使用されません

これら、border-top-width、border-right-width、border-bottom-width、border-left-widthプロパティを使用して表示するスタイルは、

  • border-top
  • border-right
  • border-bottom
  • border-left

を使用しても実現できるので、通常、あまり使用することはありません。

前ページborder-width 上へこのページの先頭 border-color次ページ
Copyleft copyLeft 2009 W-D-L.NET