border-width: 上下左右の各枠線の幅(サイズ)を一括指定
border-width: 値;
border-widthは、上下左右の枠線の幅を一括で指定するプロパティです。
各枠線の幅を下記の方法で指定できます。(値は4つまで)
2個以上の値を指定する場合はスペースで区切って記述します。
指定する個数によって、下記のように適用されます。
値 | |
---|---|
枠線の幅 | 数値 px / em / % / ex / in / cm / mm / pt / pc キーワード thin / medium / thick |
枠線の種類一覧は こちらにあります
枠線の幅(サイズ)を数値で指定 ↓↓
値を1 個指定: 上下左右すべて border-width: 2px; |
すべてが同じ幅2pxの枠線 |
値を2 個指定: 1 個目は上下、2 個目は左右 border-width: 4px 1px; |
上下が4px、左右が1px |
値を3 個指定: 1 個目は上、2 個目は左右、3 個目は下 border-width: 1px 3px 6px; |
上が1px 左右3px 下が6px |
値を4 個指定: 上、右、下、左の順 border-width: 1px 2px 4px 6px; |
上、右、下、左の順番に 1px 2px 4px 6px |
枠線の幅(サイズ)をキーワードで指定 ↓↓
ボーダーの幅指定 border-width: thin; |
thin 細い枠線 |
ボーダーの幅指定 border-width: medium; |
medium 中位の枠線 |
ボーダーの幅指定 border-width: thick; |
thick 厚い(太い)枠線 |
サンプル − 上下左右の各枠線の幅(サイズ)を一括指定
sample css ↓
.sample{
border-width: 4px 1px;
border-style: solid;
border-color: #6666ff;
text-align: center;
color: #666;
}
html ↓
<html>
<body>
<div class="sample">上下左右の各枠線の幅
</div>
</body>
</html>
実際の見え方 ↓
上下左右の各枠線の幅