メインメニュー


[スポンサードリンク]


枠線の太さを指定する
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>