border-width 【外枠の太さ指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

border-widthプロパティは、ボーダーの太さを指定する際に使用します。上下左右にそれぞれ違う色を指定したい場合は、スペースで区切って複数の値を指定する事が出来ます。ボーダーの太さを付ける際には色と種類も合わせて指定する事を推奨します。

ボーダーに関する値をまとめて指定したい場合は、borderプロパティを使います。

数値で指定する
pxやemなど、任意の単位に数値を指定して太さを決めます。

キーワードで指定する
thin(細い)、medium(普通)、thick(太い)のキーワードで大まかな指定が出来ます。太さはブラウザ依存なので、あまり使う機会は無さそうですね。

border-widthの使用例

CSSファイル

.sample001 {
 width: 300px;
 height: 80px;
 border-width: 1px 5px 10px 15px;
 border-style: solid;
 border-color: #ff0000;
 margin: 5px;
}

HTMLソース

<div class="sample001">
border-widthプロパティ使用例<br />
</div>

表示すると

border-widthプロパティ使用例

外枠関連項目

border(top right bottom left) ボーダーの太さ・スタイル・色を指定 
border-color ボーダーの色を指定する 
border-style ボーダーのスタイルを指定する 
border-width ボーダーの太さを指定する 

戻る

TOP