ボーダーの一括指定

説明

border: width style color; C1- ie4- N4-

border-top: width style color; C1- ie4- N6-

border-right: width style color; C1- ie4- N6-

border-bottom: width style color; C1- ie4- N6-

border-left: width style color; C1- ie4- N6-

値:	[ <'ボーダーの幅'> \|\| <'ボーダーのスタイル'> \|\| <色> ] \| inherit

初期値：medium none 文字色、適用要素：すべて、継承：しない、%値：なし、メディア：ビジュアル

このプロパティでは上右下左のボーダーに対して、幅、スタイル、色を1度に指定します。簡略化プロパティ「border」は、上右下左のボーダーすべてに対して、同じ幅、スタイル、色を1度に指定します。

必要な値は任意の順序で半角スペース[ ]で区切って指定できますが、ここで省略された値は初期値を参照します。ボーダーの色が指定されていない場合、ボーダーの色は文字色(colorプロパティ)の値を参照します。「margin」や「padding」とは異なり、「border」プロパティは四辺のボーダーに別々の値を設定できません。

ブラウザによるボーダー描画の違い

使用例


p {border:1px solid red}

h2 {border-bottom:thick solid red}

ボーダーの幅の値 <border-width>

thin	C1- ie4- N4- 細線。
medium	C1- ie4- N4- 通常線。初期値。
thick	C1- ie4- N4- 太線。
長さ	C1- ie4- N4- ボーダーの太さを値として明示します。負の値は不正な値です。

ボーダーのスタイルの値 <border-style>

none	C1- ie4- N4- ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、ほかの値が優先されます。初期値。
hidden	C2- N7- ボーダーを消します。太さも「0」にします。表のセルなどのボーダーが重なり合う場合は、この値が優先されます。
dotted	C1- ie55- N6- ボーダーを点線で表示。
dashed	C1- ie55- N6- ボーダーを破線で表示。
solid	C1- ie4- N4- ボーダーを実線で表示。
double	C1- ie4- N4- ボーダーを二重線で表示。
groove	C1- ie4- N4- ボーダーが凹んで見えるように表示。
ridge	C1- ie4- N4- ボーダーが突き出て見えるように表示。
inset	C1- ie4- N4- ボーダーの内側全体が凹んで見えるように立体的に表示します。
outset	C1- ie4- N4- ボーダーの内側全体が突き出て見えるように立体的に表示します。

色の値 <color>

色	C1- ie4- N4- 色の値を指定。

ボーダーの一括指定 (Border shorthand properties)

説明

使用例

ボーダーの幅の値 <border-width>

ボーダーのスタイルの値 <border-style>

色の値 <color>

ボーダーの幅

ボーダーのスタイル

ボーダーの色 (指定されていない値は初期値および文字色を参照)