ボーダー幅プロパティ
最終更新：2026-09-13
border-width ボーダー幅プロパティ
border-width は要素のボーダーの太さを設定します。あらかじめ定義されたキーワード thin、medium、thick を使うか、px や em などの明示的な長さの値を指定できます。単独で使用した場合、幅のみを制御し、スタイルと色は変更しません。
| カテゴリ | |
|---|---|
| 初期値 | medium |
| 継承 | いいえ |
| 適用対象 | all |
| アニメーションタイプ | length |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
border-width: thin | medium | thick | <length>{1,4};⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
thin | medium | thick | キーワード | あらかじめ定義されたボーダー幅のキーワード |
<length> | タイプ | 明示的なボーダー幅 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： border-width は上・右・下・左の各辺に対して 1〜4 個の値を受け付け、margin や padding と同じ規則に従います。
❓ よくある質問
Qthin、medium、thick は何ピクセルですか？
A仕様ではこれらのキーワードの正確なピクセルサイズは定義されていません。各ブラウザの実装はわずかに異なります。実際には、medium は約 3〜4px（これが既定のボーダー幅でもあります）、thin は約 1px、thick は約 5〜6px です。ブラウザによって描画が異なる可能性があるため、正確に制御したい場合は 2px のような明示的な長さを使用してください。
Qborder-width を設定したのにボーダーが表示されないのはなぜですか？
Aborder-style の既定値が none であるためです。スタイルがないと、幅がどれだけ大きくてもボーダーは描画されません。border-style（solid など）と色も設定し、3 要素が揃っている必要があります。デバッグの順序は: まず border-style を確認し、次に border-width が 0 でないか、最後に色を確認します。
Qborder-width の 1〜4 個の値は何を表しますか？
Aこれらは margin や padding とまったく同じ規則に従います。1 つの値は 4 辺すべてに適用され、2 つの値は上下・左右に対応し、3 つの値は上・左右・下に対応し、4 つの値は上から時計回り（上・右・下・左）に適用されます。例えば border-width: 2px 4px は上下 2px、左右 4px となり、片側だけは border-top-width などを使って制御できます。
Qborder-width はパーセントに対応していますか？
Aいいえ。border-width が受け付けるのはキーワード thin、medium、thick または長さの単位（px、em、rem、vw、calc() など）だけです。パーセント値は無効な宣言として扱われ無視されます。em/rem などの相対単位はフォントサイズに合わせて拡大縮小されるためレスポンシブなレイアウトに適し、固定の太さが必要な場合は px を使用してください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
