[新着] Webテンプレートを仮オープンしました
border-width と border-***-width は、枠線の太さを指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。
border-width … 上下左右をまとめて指定します。
border-***-width … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）
div {
border-width: medium thin;
border-color: #000000;
border-style: solid;
}
p {
border-top-width: 3px;
border-right-width: 6px;
border-bottom-width: 9px;
border-left-width: 12px;
border-color: #000000;
border-style: solid;
}
【太さの指定】
枠線の太さは、次の値で指定します。
数値+単位（px、他）
thin … 細い線
medium … 中間の太さ（デフォルト）
thick … 太い線
【太さのサンプル】
thin
medium
thick
1px
2px
3px
5px
10px
border-width … 上下左右をまとめて指定する
| border-width | 枠線の太さを指定します |
|---|
【指定方法】
border-width: 5px; … ［上下左右］ を指定
border-width: 5px 10px; … ［上下］ と ［左右］ を指定
border-width: 5px 10px 15px; … ［上］ と ［左右］ と ［下］ を指定
border-width: 5px 10px 15px 20px; … ［上］ と ［右］ と ［下］ と ［左］ を指定
上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。
border-***-width … 上下左右を個別に指定する
| border-top-width | 上の枠線を指定します |
|---|---|
| border-right-width | 右の枠線を指定します |
| border-bottom-width | 下の枠線を指定します |
| border-left-width | 左の枠線を指定します |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
h2, h3, span {
border-color: #2b2b2b;
border-style: solid;
}
.example1 {
border-width: thin;
}
.example2 {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 3px;
border-left-width: 10px;
}
-->
</style>
</head>
<body>
<h2 class="example1">細い枠線</h2>
<h3 class="example2">上右は枠線なし、下に3px、左に10pxの枠線</h3>
<p>細い<span class="example1">枠線</span>を指定します</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
細い枠線を指定します
