Go to information

border

borderプロパティは上下左右のボーダーの幅（太さ）、種類（スタイル）、色の指定をまとめて行う簡略化プロパティです。まとめることができるのはボーダーの幅（太さ）を指定する border-widthプロパティ, ボーダーの種類（スタイル）を指定する border-styleプロパティ, ボーダーの色を指定する border-colorプロパティの3つです。

値
初期値
個別のプロパティの初期値を参照
適用対象
すべての要素（分離ボーダーモデルの表のうち列・列グループ・行・行グループ要素を除く）
継承
しない
メディア
visual

borderプロパティが適用された要素は、ボーダー関連プロパティの値がすべて初期値にリセットされ、それから指定値が割り当て直されることになります。このため同一セレクタに個別のプロパティと簡略プロパティを併用する場合は、宣言ブロック内で後に記述した宣言の方が優先されるので効果の兼ね合いに注意しましょう。

値の指定方法は <ボーダーの幅>, <ボーダーの種類>, <ボーダーの色> の3つの値のうち何れか一つ以上の値を、順不同に半角スペースで区切って続けて指定します。たとえば、border : 20px solid #f00 ; であれば、個別に border-width : 20px ; border-style : solid ; border-color : #f00 ; の指定を1つにまとめたことになります。各値を並べる順序は特に決まっておらず、また必要のない指定は省略することができます。たとえば、上下左右のボーダーの種類だけを二重線に統一したい場合には border : double ; とだけ指定することができます。

borderプロパティを適用するとボーダー関連プロパティの値はすべて初期値にリセットされています。3つの値の中で <ボーダーの幅> と <ボーダーの色> の値が省略されていても、border-widthプロパティの初期値は "medium" で、border-colorプロパティの初期値は colorプロパティの値が適用されることになるので、ボーダーは描写されます。しかし、3つの値の中で <ボーダーの種類> の値が省略されていると、border-styleプロパティの初期値は "none" なのでボーダーは描写されません。<ボーダーの種類> の値を省略した場合に、ボーダーを描かせるためには、必要に応じて個別のプロパティでボーダーの種類を指定しなすなりして上書き変更するようにしましょう。

border-color
上下左右のボーダー（枠線）の色をまとめて指定する
border-style
上下左右のボーダー（枠線）の種類（スタイル）をまとめて指定する
border-width
上下左右のボーダー（枠線）の幅（太さ）をまとめて指定する

ボーダーの上・下・左・右を個別指定

border-top
上辺のボーダーの幅（border-top-width）、種類（border-top-style）、色（border-top-color）をまとめて指定する
border-bottom
下辺のボーダーの幅（border-bottom-width）、種類（border-bottom-style）、色（border-bottom-color）をまとめて指定する
border-left
左辺のボーダーの幅（border-left-width）、種類（border-left-style）、色（border-left-color）をまとめて指定する
border-right
右辺のボーダーの幅（border-right-width）、種類（border-right-style）、色（border-right-color）をまとめて指定する

上・下・左・右の四辺を個別に指定する場合は、これら4つのプロパティが用意されています。値の指定方法も borderプロパティと同じなので、これらの個別のプロパティについての解説は割愛します。

borderプロパティの実装状況

Windows版Internet Explorer
Windows版Internet Explorer 6 ○（ボーダーの色の "transparent" とボーダーの種類の "hidden" の値は未実装）
Windows版Internet Explorer 7 ○（ボーダーの種類の "hidden" の値は未実装）
Firefox
○
Opera
○
Safari
○
Macintosh版Internet Explorer 5
○（ボーダーの種類の "hidden" の値は未実装）

border-topプロパティ, border-bottomプロパティ, border-leftプロパティ, border-rightプロパティも同上。

サンプル

記述例
.all    { border : 3px groove #ff4500 ; }
.top    { border-top : 3px dashed #f6c ; }
.bottom { border-bottom : 3px double #960 ; }
.left   { border-left : 20px ridge #cf0 ; }
.right  { border-right : 20px inset #9fc ; }
表示例
現在位置
  1. W3G
  2. CSS
  3. ボックス
  4. border
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:02:43+09:00
更新
2008-12-29T04:30:36+09:00
URI
http://w3g.jp/css/box/border
検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!