W3G

Updated 2013.11.08 / Published 2007.02.02

borderプロパティは上下左右のボーダーの幅（太さ）、種類（スタイル）、色をまとめて設定するショートハンド（CSSにおいて値を簡略化できる記法のこと）です。まとめることができるのはボーダーの幅（太さ）を指定する border-widthプロパティ, ボーダーの種類（スタイル）を指定する border-styleプロパティ, ボーダーの色を指定する border-colorプロパティの3つです。

値

• <ボーダーの幅>
• <ボーダーの種類>
• <ボーダーの色>
• inherit

初期値

個別のプロパティの初期値を参照

適用対象

すべての要素（分離ボーダーモデルの表のうち列・列グループ・行・行グループ要素を除く）

継承

しない

メディア

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" なのでボーダーは描写されません。<ボーダーの種類> の値を省略した場合に、ボーダーを描かせるためには、必要に応じて個別のプロパティでボーダーの種類を指定しなすなりして上書き変更するようにしましょう。

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