CSS/border

border プロパティ

CSS の border プロパティは、要素のボーダーを一括で指定するために使用されます。このプロパティでは、ボーダーの幅、スタイル、色をまとめて設定できます。

基本構文

border: <border-width> <border-style> <border-color>;

border-width：枠線の太さを指定します。キーワード値（例: thin, medium, thick）またはピクセル（px）やその他の長さ単位（例: em, %）を使用できます。
border-style：枠線の種類を指定します。一般的な値としては、solid（実線）、dashed（破線）、dotted（点線）、double（二重線）などがあります。
border-color：枠線の色を指定します。色名（例: red）、RGB値（例: rgb(255, 0, 0)）、または16進数カラーコード（例: #ff0000）を使用できます。

例

border: 1px solid black;

上記の例では、幅が 1px の黒い実線ボーダーを指定しています。

border-bottom

下ボーダーを指定します。幅、スタイル、色を個別に設定できます。

例

border-bottom: 2px dashed blue;

上記の例では、下部に 2px の青い破線ボーダーを指定しています。

border-bottom-color

下ボーダーの色を指定します。

例

border-bottom-color: red;

上記の例では、下部のボーダー色を赤に指定しています。

border-bottom-left-radius

左下の角丸を指定します。

例

border-bottom-left-radius: 10px;

上記の例では、左下の角に 10px の丸みを指定しています。

border-bottom-right-radius

右下の角丸を指定します。

例

border-bottom-right-radius: 10px;

上記の例では、右下の角に 10px の丸みを指定しています。

border-bottom-style

下ボーダーのスタイルを指定します。

例

border-bottom-style: dotted;

上記の例では、下部のボーダーに点線スタイルを指定しています。

border-bottom-width

下ボーダーの幅を指定します。

例

border-bottom-width: 3px;

上記の例では、下部のボーダー幅を 3px に指定しています。

border-collapse

テーブルのボーダーの結合方法を指定します。

例

border-collapse: collapse;

上記の例では、テーブルのボーダーが結合して表示されます。

border-color

ボーダーの色を指定します。複数の色を順番に指定することができます。

例

border-color: red green blue yellow;

上記の例では、順に赤、緑、青、黄色の色を指定しています。

border-image

ボーダー画像を指定します。

例

border-image: url("border.png") 30 round;

上記の例では、ボーダー画像として border.png を使用し、30% の割合で分割し、繰り返し表示します。

border-image-outset

ボーダー画像がボーダー領域からどれだけはみ出すかを指定します。

例

border-image-outset: 10px;

上記の例では、ボーダー画像が 10px はみ出すように指定しています。

border-image-repeat

ボーダー画像の繰り返し方法を指定します。

例

border-image-repeat: repeat;

上記の例では、ボーダー画像が繰り返し表示されます。

border-image-slice

ボーダー画像の分割方法を指定します。

例

border-image-slice: 30%;

上記の例では、ボーダー画像を 30% の位置で切り取って使用します。

border-image-source

ボーダー画像のソースを指定します。

例

border-image-source: url("border.png");

上記の例では、border.png をボーダー画像として指定しています。

border-image-width

ボーダー画像の幅を指定します。

例

border-image-width: 1;

上記の例では、ボーダー画像の幅を 1 倍に設定しています。

border-left

左ボーダーを指定します。幅、スタイル、色を個別に設定できます。

例

border-left: 1px solid black;

上記の例では、左側に 1px の黒い実線ボーダーを指定しています。

border-left-color

左ボーダーの色を指定します。

例

border-left-color: red;

上記の例では、左側のボーダー色を赤に指定しています。

border-left-style

左ボーダーのスタイルを指定します。

例

border-left-style: dashed;

上記の例では、左側に破線ボーダーを指定しています。

border-left-width

左ボーダーの幅を指定します。

例

border-left-width: 2px;

上記の例では、左側のボーダー幅を 2px に設定しています。

border-radius

全体の角丸を指定します。四隅の角に丸みを付けることができます。

例

border-radius: 10px;

上記の例では、全ての角に 10px の丸みを指定しています。

border-right

右ボーダーを指定します。幅、スタイル、色を個別に設定できます。

例

border-right: 1px solid black;

上記の例では、右側に 1px の黒い実線ボーダーを指定しています。

border-right-color

右ボーダーの色を指定します。

例

border-right-color: blue;

上記の例では、右側のボーダー色を青に指定しています。

border-right-style

右ボーダーのスタイルを指定します。

例

border-right-style: dotted;

上記の例では、右側に点線ボーダーを指定しています。

border-right-width

右ボーダーの幅を指定します。

例

border-right-width: 3px;

上記の例では、右側のボーダー幅を 3px に設定しています。

border-spacing

テーブルセルの間隔を指定します。

例

border-spacing: 2px 5px;

上記の例では、テーブルセル間に 2px の水平間隔と 5px の垂直間隔を指定しています。

border-style

ボーダーのスタイルを指定します。複数のスタイルを指定できます。

例

border-style: solid dashed dotted double;

上記の例では、ボーダーのスタイルを順に実線、破線、点線、二重線に指定しています。

border-top

上ボーダーを指定します。幅、スタイル、色を個別に設定できます。

例

border-top: 1px solid black;

上記の例では、上部に 1px の黒い実線ボーダーを指定しています。

border-top-color

上ボーダーの色を指定します。

例

border-top-color: green;

上記の例では、上部のボーダー色を緑に指定しています。

border-top-left-radius

左上の角丸を指定します。

例

border-top-left-radius: 10px;

上記の例では、左上の角に 10px の丸みを指定しています。

border-top-right-radius

右上の角丸を指定します。

例

border-top-right-radius: 10px;

上記の例では、右上の角に 10px の丸みを指定しています。

border-top-style

上ボーダーのスタイルを指定します。

例

border-top-style: groove;

上記の例では、上部に溝線スタイルのボーダーを指定しています。

border-top-width

上ボーダーの幅を指定します。

例

border-top-width: 2px;

上記の例では、上部のボーダー幅を 2px に設定しています。

border-width

ボーダーの幅を指定します。順番に指定することもできます。

例

border-width: 1px 2px 3px 4px;

上記の例では、上・右・下・左のボーダー幅をそれぞれ指定しています。

まとめ

borderプロパティを使うことで、要素に枠線を追加でき、太さ、スタイル、色を自由にカスタマイズできます。
個別の辺に対して異なるボーダーを指定したり、角を丸くしたりすることも可能です。
ボーダーはウェブデザインにおいて、要素の区切りや視覚的な強調に非常に有用です。