ボーダ - wicky @ ウィキ

ボーダ

　「ボーダ」は、枠線を設定するためのプロパティ。それぞれのプロパティは内容の四方を囲む上下左右で、それぞれの枠線の太さ、種類、色を指定することができる。プロパティは次の形式になっている。

　border - 位置 (top、right、bottom、left) - プロパティ (style、border、color)

●設定例

border-top-style

---

<<線の種類>>
　border-styleプロパティで、線の種類を指定できる。線の種類は内容の四方を囲む上下左右でそれぞれ指定することができる。

■線の種類に関するプロパティ

プロパティ	概要
border-top-style	上の線種
border-right-style	右の線種
border-bottom-style	下の線種
border-left-style	左の線種

　プロパティ値は、既定値によって指定することができる。

■線種の既定値

表示例	値	概要
	dotted	点線
	dashed	破線
	solid	実線
	double	二重線
	groove	窪み線
	ridge	浮き線
	inset	立体的な面として内容が窪んで表示
	outset	立体的な面として内容が浮き上がって表示
	none	線なし（デフォルト、表などで線が重なる場合は別の要素が優先される）
	hidden	線なし（表などで線が重なる場合も非表示）

　※線種はブラウザによって表示が異なる。

　以下に、h1要素に、線の種類を設定する例を示す。

●h1の上下の線種を設定

h1 {
    border-top-style : solid;
    border-bottom-style : double;
}

　また、枠線の種類は、border-styleプロパティで、上下左右をまとめて指定することができる。

　※複数の値を設定する場合は、区切り文字として、カンマ「,」または空白を使用する。

■border-styleプロパティの値

値の数	値の内容
１	上下左右
２	上下、左右
３	上、左右、下
４	上、右、下、左（ボックスの上から時計回りに指定）

　以下に、border-styleプロパティの設定例を示す。

●上を実線に、左を二重線に指定

p { border-style : solid none none double }

　※枠線の種類は子要素に継承されない。親要素の枠線の種類を継承したい場合は、次のように「inherit」を設定する。
　　p { border-style : inherit }

---

<<線の太さ>>
　border-widthプロパティでは、線の太さを指定する。線の太さは内容の四方を囲む上下左右でそれぞれ指定することができる。

■線の太さに関するプロパティ

プロパティ	概要
border-top-width	上の線の太さ
border-right-width	右の線の太さ
border-bottom-width	下の線の太さ
border-left-width	左の線の太さ

　プロパティ値には、明示的な太さの単位を指定できるほかに、既定値による線の太さを指定することができる。

　※長さの単位については、プロパティ値の単位を参照。

■線の太さの既定値

値	概要
thin	細線
medium	中線（デフォルト）
thick	太線

　以下に、線の太さを設定する例を示す。

●h1の上と左の線の太さを設定

h1 {
    border-style : solid;
    border-top-width : 15px;
    border-left-width : 15px;
}

　また、枠線の種類は、border-widthプロパティで、上下左右をまとめて指定することができる。

　※複数の値を指定する場合は、区切り文字として、カンマ「,」または空白を使用する。

■border-widthプロパティの値

値の数	値の内容
１	上下左右
２	上下、左右
３	上、左右、右
４	上、右、下、左（ボックスの上から時計回りに指定）

　以下に、border-widthプロパティの設定例を示す。

●h1要素に枠線を指定し、太さを15pxに指定

h1 {
    border-style : outset;
    border-width : 15px;
}

　※枠線の太さは子要素に継承されない。親要素の枠線の太さを継承したい場合は、次のように「inherit」を設定する。

---

<<線の色>>
　border-colorプロパティでは、線の色を指定する。色は内容の四方を囲む上下左右でそれぞれ指定することができる。

■線の色に関するプロパティ

プロパティ	概要
border-top-color	上の線の色
border-right-color	右の線の色
border-bottom-color	下の線の色
border-left-color	左の線の色

　プロパティ値には、明示的な色の単位を指定できるほかに、transparent（透明）を指定することができる。

　※色の指定方法については、プロパティ値の単位を参照。

　以下に、線の色を設定する例を示す。

●h1の上と左の線の色を赤に設定

h1 {
    border-style : solid;
    border-top-color : red;
    border-left-color : red;
}

　また、枠線の色は、border-colorプロパティで、上下左右をまとめて指定することができる。

　※複数の値を指定する場合は、区切り文字として、カンマ「,」または空白を使用する。

■border-colorプロパティの値

値の数	値の内容
１	上下左右
２	上下、左右
３	上、左右、下
４	上、右、下、左

　以下に、border-colorプロパティの設定例を示す。

●h1要素に枠線を設定し、上下の線を赤に、左右の線を紺色に指定

h1 {
    border-style : solid;
    border-color : red navy red navy;
}

　※枠線の色は子要素に継承されない。親要素の枠線の色を継承したい場合は、次のように「inherit」を設定する。
　　p { border-color : inherit }

---

<<線の色をまとめて設定>>
　borderプロパティによって、線関連の設定を上下左右でまとめることができる。

■borderのプロパティ

プロパティ	概要
border-top	上線の設定
border-right	右線の設定
border-bottom	下線の設定
border-left	左線の設定

　プロパティの値には、線の太さ、線の種類、色を指定する。

●上下左右のプロパティをまとめて設定する例

p {
   border-top : 3px solid navy;
   border-right : 1em solid red;
   border-bottom : 3px solid navy;
   border-left :  1em solid navy;
}

　また、上下左右の線に同じプロパティを設定する場合は、borderプロパティでまとめて設定することができる。

●上下左右のプロパティに同じ値を設定する場合

p {
    border : 3px solid navy;
}