border-left左ボーダーのスタイル・太さ・色を指定する
対応ブラウザ
- IE4
- IE5
- IE6
- IE7
- IEMac
- Netscape6
- Netscape7
- Firefox1
- Firefox2
- Opera6
- Opera7
- Opera8
- Opera9
- Safari1
- Safari2
仕様
CSS Level1
値
| 値 | 内容 |
|---|---|
| スタイル | |
| none | ボーダーは表示されず、太さも0です 表のセルなどボーダーが重なり合う場合は他のボーダー指定が優先となる[初期値] |
| hidden | ボーダーは表示されず、太さも0です 表のセルなどボーダーが重なり合う場合はこの値が優先となる |
| solid | 1本線で表示する |
| double | 2本線で表示する |
| groove | 立体的に窪んだ線で表示する |
| ridge | 立体的に隆起した線で表示する |
| inset | 上と左が暗く、下と右が明るいボーダーが表示され、囲まれた領域が立体的に窪んだように表示される |
| outset | 上と左が明るく、下と右が暗いボーダーが表示され、囲まれた領域全体が立体的に隆起したように表示される |
| dashed | 破線で表示する |
| dotted | 点線で表示する |
| 太さ | |
| 数値 | 数値にpxなどの単位をつけて指定する |
| キーワードで指定 | thin（細い）、medium（普通）、thick（太い）のいずれか 実際に表示される太さはブラウザにより異なる |
| 色 | |
| 色コード | #000000、#000、blackなど色を指定する |
| transparent | ボーダーの色を透明にする |
ブラウザバグなど
ボックスの幅や高さにパディングやボーダーのサイズを含める
サイズを指定した要素に二重線のボーダーをつけると、ボーダーの隙間に背景が表示されない
インライン要素にborderやpaddingが効かない
空セルにボーダーの指定をすると一回り大きな位置にボーダーが付く
空セルでborder-collapse:collapse;とborder-collapse:separate;とでボーダーの表示が違う
インライン要素にwidthやheightを指定すると表示が変わる
borderボーダーのスタイル・太さ・色を四方まとめて指定する
border-bottom下ボーダーのスタイル・太さ・色を指定する
border-bottom-color下ボーダーの色を指定する
border-bottom-style下ボーダーのスタイルを指定する
border-bottom-width下ボーダーの太さを指定する
border-colorボーダーの色を指定する
border-left左ボーダーのスタイル・太さ・色を指定する
border-left-color左ボーダーの色を指定する
border-left-style左ボーダーのスタイルを指定する
border-left-width左ボーダーの太さを指定する
border-right右ボーダーのスタイル・太さ・色を指定する
border-right-color右ボーダーの色を指定する
border-right-style右ボーダーのスタイルを指定する
border-right-width右ボーダーの太さを指定する
border-styleボーダーのスタイルを指定する
border-top上ボーダーのスタイル・太さ・色を指定する
border-top-color上ボーダーの色を指定する
border-top-style上ボーダーのスタイルを指定する
border-top-width上ボーダーの太さを指定する
border-widthボーダーの太さを指定する
marginマージンに関する指定をまとめて行う
margin-bottom下マージンを指定する
margin-left左マージンを指定する
margin-right右マージンを指定する
margin-top上マージンを指定する
paddingパディングに関する指定をまとめて行う
padding-bottom下パディングを指定する
padding-left左パディングを指定する
padding-right右パディングを指定する
padding-top上パディングを指定する
主要ブラウザに非対応
