この記事の要点

border はボックスの枠線を描く CSS プロパティで、width / style / color の 3 つの要素から成る ショートハンド border: 1px solid #333; で 4 辺を一括指定できる 辺ごとに border-top / border-right / border-bottom / border-left を指定可能 border-radius で角丸、border-image で画像枠も作れる デフォルトでは枠線の幅が要素のサイズに加算される。box-sizing: border-box で枠を内側に含められる

border 関連プロパティとは

border は要素の枠線を描くための CSS プロパティ群です。ボックスモデルにおいて padding と margin の間に位置し、枠線の太さ・線種・色を指定できます。

3 つの構成要素

border は内部的に「太さ」「線種」「色」の 3 つの値を持ちます。

プロパティ	意味	例
border-width	枠線の太さ	1px / thin / medium / thick
border-style	枠線の線種	solid / dashed / dotted / double 等
border-color	枠線の色	#333 / red / rgb() / currentColor

ショートハンドで一括指定

/* width style color の順 */
.box {
  border: 1px solid #333;
}

/* 個別に指定する場合 */
.box {
  border-width: 1px;
  border-style: solid;
  border-color: #333;
}

⚠️ border-style を指定しないと border は表示されません。border-width と border-color だけ書いても何も出ないので注意。

border-style の代表値

値	見た目
none	何も描かない（既定）
solid	実線（最も一般的）
dashed	破線
dotted	点線
double	二重線
groove / ridge	立体感のある彫り込み / 浮き出し
inset / outset	へこみ / 出っ張り風
hidden	none と似るが table の border-collapse 時の優先度が違う

辺ごとの指定

4 辺それぞれに別々のスタイルを当てられます。

.box {
  border-top:    2px solid #f00;
  border-right:  1px dashed #ccc;
  border-bottom: 2px solid #f00;
  border-left:   1px dashed #ccc;
}

/* 個別プロパティで指定する場合 */
.box {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #f00;
}

border-radius（角丸）

.card {
  border: 1px solid #ddd;
  border-radius: 8px;          /* 4 隅すべて 8px */
}

.pill {
  border-radius: 9999px;       /* カプセル型 */
}

.fancy {
  border-radius: 10px 30px 10px 30px;  /* 左上 右上 右下 左下 */
}

.ellipse {
  border-radius: 50% / 30%;    /* 楕円 */
}

border-image（画像で枠を描く）

.frame {
  border: 30px solid transparent;
  border-image: url("frame.png") 30 round;
}

画像を 9 分割スライスして 4 辺と 4 隅に貼り、繰り返し / 引き伸ばし / 丸めるなどの指定が可能です。

box-sizing との関係

border の幅は、既定では width / height に加算されます（content-box モデル）。たとえば width: 200px; border: 10px solid; の要素は実際には 220px 幅になります。

これを内側に含めたい場合は box-sizing: border-box を指定します。

* { box-sizing: border-box; }

.box {
  width: 200px;
  border: 10px solid;
  /* width 200px の中に border が含まれる(中身は 180px) */
}

border と outline の違い

項目	border	outline
レイアウトへの影響	サイズに影響する	影響しない（重なって描画）
辺ごとの指定	可能	4 辺一括のみ
角丸	border-radius で可	基本不可（一部ブラウザ対応）
主な用途	枠線のデザイン	フォーカス表示（アクセシビリティ）

table の border-collapse

HTML の table 要素では、隣接する border が二重線になる現象があります。border-collapse: collapse で隣接 border を融合できます。

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}
th, td {
  border: 1px solid #ccc;
  padding: 6px;
}

border の典型レシピ

/* 下線だけのナビ */
.nav a { border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: #06c; }

/* カード */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 引用ブロックの左ライン */
blockquote {
  border-left: 4px solid #06c;
  padding-left: 1em;
  color: #555;
}

よくあるトラブル

症状	対処
border が見えない	border-style が未指定 / none。solid 等を指定
要素が広がってレイアウト崩れ	box-sizing: border-box を全要素に適用
テーブルの罫線が二重	border-collapse: collapse を指定
角丸の中の背景が角からはみ出す	子要素にも overflow: hidden や border-radius 継承を当てる

関連

• ボックス関連プロパティ — 親カテゴリ
• CSS — 上位カテゴリ