Updated / Published

borderプロパティは上下左右のボーダーの幅(太さ)、種類(スタイル)、色をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。まとめることができるのはボーダーの幅(太さ)を指定する 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プロパティの実装状況

IE
◯:IE6, 7にサポートしていないキーワードあり
IE6はボーダーの色の "transparent" とボーダーの種類の "hidden" の値は未サポート
IE7はボーダーの種類の "hidden" の値は未サポート
Firefox
Opera
Chrome
Safari
iOS
Android

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