メインメニュー


[スポンサードリンク]


枠線の設定をまとめて指定する
border-top:枠線のプロパティ  ← 上の枠線の設定
border-bottom:枠線のプロパティ  ← 下の枠線の設定
border-left:枠線のプロパティ  ← 左の枠線の設定
border-right:枠線のプロパティ  ← 右の枠線の設定
border:枠線のプロパティ  ← 上下左右の枠線の設定(全て同一の値)

枠線のプロパティ:
border-colorの値 枠線の色
border-widthの値 枠線の太さ
border-styleの値 枠線の形式

borderプロパティで、枠線に関する設定をまとめて指定します。
border-top,border-bottom,border-left,border-rightプロパティでそれぞれの枠線の設定をまとめて指定することもできますし、borderプロパティで上下左右の全ての枠線をまとめて指定することもできます。
必要な値を任意の順序で半角スペースで区切って指定しますが、指定しなかった値については初期値が設定されます。
また、borderプロパティで上下左右に別々の設定をすることはできません。

それぞれのプロパティの詳しい設定方法は下記を御覧ください。

上の枠線の設定

border-top:double 3px #ff9933;

下の枠線の設定

border-bottom:dotted 1px #cccc00;

左の枠線の設定

border-left:groove 0.5em aqua;

右の枠線の設定

border-right:outset thick lime;

上下左右の枠線の設定

border:dashed 2px red;

上下左右に別々の値を指定するとき

border-top   :double 3px #ff9933;
border-bottom:dotted 1px #cccc00;
border-left  :groove 0.5em aqua;
border-right :outset thick lime;


<STYLE type="text/css">
<!--
P { padding:0.5em; }
.case1 { border-top    : double 3px #ff9933; }
.case2 { border-bottom : dotted 1px #cccc00; }
.case3 { border-left   : groove 0.5em aqua; }
.case4 { border-right  : outset thick lime; }
.case5 { border        : dashed 2px red; }
.case6 {
border-top    : double 3px #ff9933;
border-bottom : dotted 1px #cccc00;
border-left   : groove 0.5em aqua;
border-right  : outset thick lime;
}
-->
</STYLE>

上の枠線の設定
<P class="case1">border-top:double 3px #ff9933;</P>
下の枠線の設定
<P class="case2">border-bottom:dotted 1px #cccc00;</P>
左の枠線の設定
<P class="case3">border-left:groove 0.5em aqua;</P>
右の枠線の設定
<P class="case4">border-right:outset thick lime;</P>
上下左右の枠線の設定
<P class="case5">border:dashed 2px red;</P>
上下左右に別々の値を指定するとき
<P class="case6">
border-top   :double 3px #ff9933;<BR>
border-bottom:dotted 1px #cccc00;<BR>
border-left  :groove 0.5em aqua;<BR>
border-right :outset thick lime;
</P>