| border-top-width:太さ |
← 上の枠線の太さ |
| border-bottom-width:太さ |
← 下の枠線の太さ |
| border-left-width:太さ |
← 左の枠線の太さ |
| border-right-width:太さ |
← 右の枠線の太さ |
| border-width:太さ |
← 上・右・下・左の枠線の太さ |
太さ:
| 単位つきの数値 |
|
| thin |
細い枠線 |
| medium |
中くらいの枠線 (デフォルト) |
| thick |
太い枠線 |
border-widthプロパティで、枠線の太さを指定します。
border-top-width,border-bottom-width,border-left-width,border-right-widthプロパティでそれぞれの枠線の太さを個別に指定することもできますし、border-widthプロパティでまとめて指定することもできます。
まとめて指定するときは、値を半角スペースで区切って指定しますが、値の数によって適用される枠線の太さが変わります。
| 値が1つのとき |
:上下左右に同一の太さ |
|
例)border-width:10px; |
| 値が2つのとき |
:上下、左右の太さ |
|
例)border-width:10px 5px; |
| 値が3つのとき |
:上、左右、下の太さ |
|
例)border-width:thin medium thick; |
| 値が4つのとき |
:上、右、下、左の太さ |
|
例)border-width:10px thin medium thick; |
|
単位つきの数値
単位をつけた数値を使って枠線の太さを指定します。
単位の詳しいことは、『
単位の指定方法』を御覧ください。
・ { border-top-width:1em; }
・ { border-bottom-width:12px; }
キーワードで指定
キーワードとして指定できるものは、thin,medium,thickの3種類があります。
このときの実際の太さはブラウザによって異なります。
・ { border-left-width:thin; }
・ { border-right-width:medium; }
上の枠線の太さ
border-top-width:10px;
下の枠線の太さ
border-bottom-width:thin;
左の枠線の太さ
border-left-width:medium;
右の枠線の太さ
border-right-width:thick;
<STYLE type="text/css">
<!--
P { border-color:#ffccff; border-style:solid; padding:0.5em; }
.case1 {
border-top-width : 10px; }
.case2 {
border-bottom-width : thin; }
.case3 {
border-left-width : medium; }
.case4 {
border-right-width : thick; }
-->
</STYLE>
上の枠線の太さ
<P class="case1">border-top-width:10px;
</P>
下の枠線の太さ
<P class="case2">border-bottom-width:thin;
</P>
左の枠線の太さ
<P class="case3">border-left-width:medium;
</P>
右の枠線の太さ
<P class="case4">border-right-width:thick;
</P>
値が1つのとき:上下左右に同一の太さ
border-width:10px;
値が2つのとき:上下、左右の太さ
border-width:10px 5px;
値が3つのとき:上、左右、下の太さ
border-width:thin medium thick;
値が4つのとき:上、右、下、左の太さ
border-width:10px thin medium thick;
<STYLE type="text/css">
<!--
P { border-color:#ffccff; border-style:solid; padding:0.5em; }
.case11 {
border-width : 10px; }
.case12 {
border-width : 10px 5px; }
.case13 {
border-width : thin medium thick; }
.case14 {
border-width : 10px thin medium thick; }
-->
</STYLE>
値が1つのとき:上下左右に同一の太さ
<P class="case11">border-width:10px;
</P>
値が2つのとき:上下、左右の太さ
<P class="case12">border-width:10px 5px;
</P>
値が3つのとき:上、左右、下の太さ
<P class="case13">border-width:thin medium thick;
</P>
値が4つのとき:上、右、下、左の太さ
<P class="case14">border-width:10px thin medium thick;
</P>