　枠線の太さを指定する

■border-width:

指定できる値

スタイルシートでの単位指定

数値にptなどの単位をつけて指定する

キーワード

thin    細い線
medium  普通の線
thick   太い線

値の指定方法		個別に設定するプロパティ
値が一つ	上下左右同じ設定	border-top-width	上のみ設定
値が二つ	上下、左右の設定	border-left-width	左のみ設定
値が三つ	上と左右と下の設定	border-right-width	右のみ設定
値が四つ	上、右、下、左の順で設定	border-bottom-width	下のみ設定

枠線の太さを指定するには、border-widthプロパティを使います。

値には数値にptなどの単位を付けて細かく指定する方法と、thin（細い線）、medium(通常の線）、thick(太い線）などのキーワードをつかって大まかな設定も出来ます。

このプロパティも、値を複数設定することでボックスの上下左右の枠線の太さをいろいろ設定することが出来ます。上の表や下の例を見て参考にして下さいね。

サンプル - Microsoft Internet Explorer

thinの太さの線です

mediumの太さの線です

thickの太さのです

10pxの太さの線です

20pxの太さの線です

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p   { border-style:solid;
      border-color:green;  }
.test1 { border-width:thin;  }
.test2 { border-width:medium;}
.test3 { border-width:thick; }
.test4 { border-width:10px;  }
.test5 { border-width:20px;  }
-->
</style>
</head>
<body>
<p class="test1">thinの太さの線です</p>
<p class="test2">mediumの太さの線です</p>
<p class="test3">thickの太さのです</p>
<p class="test4">10pxの太さの線です</p>
<p class="test5">20pxの太さの線です</p>
</body>
</html>

サンプル - Microsoft Internet Explorer

上下の太さがthin、左右がthick

上が5px、右が10px、下が5px、左が2px

上の枠線が20pxの太さ

左が30px、下が、10pxの太さ

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p  { border-style:solid;
     border-color:tomato;  }
.test1 { border-width:thin thick;  }
.test2 { border-width:5px 10px 5px 2px;}
.test3 { border-top-width:20px; }
.test4 { border-left-width:30px;
         border-bottom-width: 10px;}
-->
</style>
</head>
<body>
<p class="test1">上下の太さがthin
、左右がthick</p>
<p class="test2">
上が5px、右が10px、下が5px、左が2px
</p>
<p class="test3">上の枠線が20pxの太さ</p>
<p class="test4">左が30px、下が、10pxの太さ
</p>
</body>
</html>