CSS ・ 枠線・装飾
border
枠線
要素の周りに枠線を引きます。線の太さ・種類・色の3つを、スペース区切りでまとめて指定します。
01
サンプルコード
HTML
1<div class="box solid">border: 2px solid</div>
2<div class="box dashed">border: 2px dashed</div>
3<div class="box bottom">border-bottom だけ</div>
CSS
1.box {
2 padding: 8px 12px;
3 margin-bottom: 10px;
4}
5.solid {
6 border: 2px solid #b68235;
7}
8.dashed {
9 border: 2px dashed #b68235;
10}
11.bottom {
12 border-bottom: 2px solid #b68235;
13}
02
実行結果
ブラウザでの表示
03
解説
border は、太さ・線の種類・色をまとめて指定する一括指定プロパティです。順番は自由ですが、「太さ 種類 色」の順に書くのが一般的です。
線の種類（solid など）を指定しないと、枠線は表示されません。
border-top・border-bottom などを使うと、1辺だけに線を引けます。見出しの下線や区切り線によく使います。
04
応用例・注意点
線の種類・個別に指定するプロパティ
| 値 / プロパティ | 説明 |
|---|---|
solid | 実線 |
dashed | 破線 |
dotted | 点線 |
double | 二重線 |
none | 線なし |
hidden | 線なし。表の枠線が重なったとき（border-collapse: collapse）は最優先で非表示になる |
groove | 窪んだ枠線（溝のように見える） |
ridge | 立体的な枠線（盛り上がって見える） |
border-width | 線の太さだけを指定（px など） |
border-style | 線の種類だけを指定（solid など） |
border-color | 線の色だけを指定 |
border-top / -right / -bottom / -left | 1辺だけに線を引く |
角を丸くした枠線
border-radius と組み合わせると、角の丸いボックスになります。
CSS
1.card {
2 border: 1px solid #ddd;
3 border-radius: 8px;
4}
太さ・種類・色を個別に指定する
border はショートハンドです。個別のプロパティで書くこともでき、一部だけ変えたいときに便利です。
CSS
1.box {
2 border-width: 2px;
3 border-style: solid;
4 border-color: #b68235;
5}
6.box:hover {
7 border-color: #c0392b;
8}
注意点
- 01枠線の太さは要素の大きさに加算されます（box-sizing: border-box を指定すると含まれる）。
- 02線の種類を省略すると表示されません。
- 03groove・ridge は線の色の明暗で立体感を出すため、太さが細いと違いが分かりにくくなります。4px 以上を目安にします。