CSS ボーダー

Volardev 編集部 April 12, 2026

CSSのボーダープロパティを使用すると、要素のボーダーのスタイル、幅、および色を指定できます。

1. CSS ボーダースタイル (CSS Border Style)

border-style プロパティは、表示するボーダーの種類を指定します。

以下の値を使用できます：

dotted: 点線のボーダーを定義します
dashed: 破線のボーダーを定義します
solid: 実線のボーダーを定義します
double: 二重線のボーダーを定義します。4つのボーダーの幅の合計は、border-width で指定した値と同じになります
groove: 3Dの溝状のボーダーを定義します。効果は border-color の値に依存します
ridge: 3Dの山状のボーダーを定義します。効果は border-color の値に依存します
inset: 3Dのインセットボーダーを定義します。効果は border-color の値に依存します
outset: 3Dのアウトセットボーダーを定義します。効果は border-color の値に依存します
none: ボーダーなしを定義します
hidden: 非表示のボーダーを定義します

border-style プロパティには、1つから4つの値（上ボーダー、右ボーダー、下ボーダー、左ボーダーの順）を設定できます。

1.1 ボーダースタイルのデモ

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mixed {border-style: dotted dashed solid double;}

注意： 他のボーダープロパティ（border-width や border-color など）を適用しても、border-style プロパティが設定されていない限り、ボーダーは表示されません。

2. CSS ボーダーの幅 (CSS Border Width)

border-width プロパティは、4つのボーダーの幅を指定します。

幅は、特定のサイズ（px, pt, cm, emなど）として設定するか、あらかじめ用意された3つのキーワード thin（細い）、medium（中間）、thick（太い）のいずれかを使用して設定できます。

2.1 ボーダー幅の例

p.one {
  border-style: solid;
  border-width: 5px; /* 5pxの幅を指定 */
}

p.two {
  border-style: solid;
  border-width: medium; /* mediumキーワードを使用 */
}

p.three {
  border-style: dotted;
  border-width: 2px; /* 2pxの幅を指定 */
}

p.four {
  border-style: dotted;
  border-width: thick; /* thickキーワードを使用 */
}

2.2 特定のサイドの幅指定

border-width プロパティには、1つから4つの値（上、右、下、左の順）を指定できます。

p.one {
  border-style: solid;
  border-width: 5px 20px 10px 1px; /* 上 5px、右 20px、下 10px、左 1px */
}

3. CSS ボーダーの色 (CSS Border Color)

border-color プロパティは、4つのボーダーの色を設定するために使用されます。

色は以下の方法で設定できます：

name - 「red」のようなカラー名を指定
HEX - 「#ff0000」のような16進数値を指定
RGB - 「rgb(255, 0, 0)」のようなRGB値を指定
HSL - 「hsl(0, 100%, 50%)」のようなHSL値を指定
transparent - 透明に設定

注意： border-color が設定されていない場合、要素の color プロパティを継承します。

3.1 ボーダーカラーの例

p.one {
  border-style: solid;
  border-color: red; /* 赤色のボーダー */
}

p.two {
  border-style: solid;
  border-color: green; /* 緑色のボーダー */
}

p.three {
  border-style: dotted;
  border-color: blue; /* 青色の点線ボーダー */
}

3.2 特定のサイドの色指定

border-color プロパティには、1つから4つの値（上、右、下、左の順）を指定できます。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上:赤、右:緑、下:青、左:黄 */
}

4. CSS ボーダー - 個別のサイド (CSS Border - Individual Sides)

これまでの例で見たように、各サイドに異なるボーダーを指定することが可能です。

CSSには、各ボーダー（上、右、下、左）を個別に指定するプロパティもあります。

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

上記のコードは以下のように border-style プロパティで一括指定した場合と同じ結果になります。

p {
  border-style: dotted solid dotted solid;
}

4.1 値の数による適用ルールの違い

border-style プロパティに指定する値の数によって、適用範囲が以下のように変わります：

4つの値（例: border-style: dotted solid double dashed;）

上: dotted / 右: solid / 下: double / 左: dashed

3つの値（例: border-style: dotted solid double;）

上: dotted / 左右: solid / 下: double

2つの値（例: border-style: dotted solid;）

上下: dotted / 左右: solid

1つの値（例: border-style: dotted;）

4つのサイドすべてが dotted

5. CSS ボーダー - ショートハンドプロパティ (CSS Border - Shorthand Property)

多くのプロパティを扱う場合、コードを短縮して書くことが可能です。

ボーダーに関しても、border プロパティという一つの「ショートハンド（shorthand）」プロパティに、以下の個別プロパティをまとめることができます：

border-width
border-style（必須項目）
border-color

5.1 ショートハンドの例

p {
  border: 5px solid red; /* 幅 スタイル 色 を一括指定 */
}

また、特定のサイドのみをショートハンドで指定することも可能です：

/* 下ボーダーのみ指定 */
p {
  border-bottom: 6px solid blue;
}

6. CSS 角丸ボーダー (CSS Rounded Borders)

border-radius プロパティは、要素に角丸のボーダーを追加するために使用されます。

6.1 角丸の例

/* 標準的な角丸 */
p {
  border: 2px solid red;
  border-radius: 5px;
}

/* より丸みを帯びた角丸 */
p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

/* 非常に大きい丸み */
p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}

注意：border-radius プロパティは、実際のボーダーが表示されていなくても、背景（background）の角を丸める際にも機能します。