Border 省略形プロパティ
最終更新：2026-09-13
border Border 省略形プロパティ
border 省略形プロパティは CSS で最もよく使われるプロパティの一つで、要素の境界線の幅・スタイル・色を1つの宣言で設定できます。border は要素のコンテンツの周りを、padding のすぐ内側に囲み、ボックスモデルの重要な一部です。border を使えば、どんな要素にもすばやく見える輪郭を与えられます。
| カテゴリ | |
|---|---|
| 初期値 | medium none currentcolor |
| 継承 | いいえ |
| 適用対象 | all |
| アニメーションタイプ | shadow |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
border: <border-width> || <border-style> || <color>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<border-width> || <border-style> || <color> | 値 | border の幅・スタイル・色の省略形。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： border 省略形は4辺すべてを一度に設定します。1辺だけをスタイルしたい場合は、代わりに border-top、border-right、border-bottom、border-left を使ってください。
注意： border 省略形は、それ以前に設定された border-width、border-style、border-color をリセットします。いずれか1つだけ変更したい場合は、対応する省略なしのプロパティを使うことをお勧めします。
❓ よくある質問
Qborder と outline の違いは何ですか？
Aborder はボックスモデルの一部で、コンテンツと padding の周りに描かれるため、スペースを占め、要素のサイズやレイアウトに影響します。outline は境界線の外側に描かれ、スペースを占めず、レイアウトに影響しないため、キーボードのフォーカス表示に最適です。装飾的な境界線には border を、スペースを取らない視覚的な手がかり（特にフォーカス状態）には outline を使ってください。
Qborder を設定したのに見えないのはなぜですか？
A最も一般的な原因は border-style を設定し忘れていることです。既定値は none なので、境界線を描画するには明示的にスタイル（solid や dashed など）を指定する必要があります。また、border-width が 0 でないこと、他の規則で色が上書きされていないことも確認してください。最も簡単な解決策は、border 省略形で3つを一度に設定することです。
Qborder 省略形の3つの値の順序は重要ですか？
A厳密な決まりはありません。ブラウザーは値の型から自動的に判別します。ただし、慣例的な順序は幅・スタイル・色です（例：border: 1px solid #ccc;）。スタイルを省略すると既定の none（境界線なし）になり、色を省略すると currentcolor（文字色）になる点に注意してください。一貫した順序を保つと、コードの保守も容易になります。
Q4辺に異なる境界線を設定するにはどうすればよいですか？
Aborder-top、border-right、border-bottom、border-left という辺ごとの省略形を使うか、最初に全体の border を設定してから各辺を上書きします。例えば border: 1px solid #ddd; border-bottom: 3px solid #e74c3c; とすると、他の3辺は通常の境界線で、下部だけ強調された境界線になります。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
