要素の周りに線をつける borderプロパティ

borderはHTMLの部品に枠線を引くためのプロパティです。

borderは上下左右のボーダーラインの太さ、色などを一括でまとめて指定するプロパティで以下の値で指定します。

border-width の値
ボーダーラインの太さを指定します。
border-style の値
ボーダーラインのスタイルを指定します。
border-color の値
ボーダーラインの色を指定します。

borderプロパティを使用すると「border-width」、「border-style」、「border-color」をまとめて書くことができます。

div {
 border-top: 1px dotted #CCC;
}

p {
 border: 5px solid blue;
}

１つのサイズを指定した場合はすべての辺に同じサイズが適用されます。

辺によって太さを変えたい場合は半角スペースで区切って上・右・下・左（時計回り）の順で指定します。

指定方法	説明
キーワード	「thin（細い線）」、「medium（普通の太さ）」、「thick（太い線）」
数値	数値に「px」や「rem」、「％」などの単位をつける

div {
 border-width: thick;
 border-style: solid;
}

p {
 border-width: 1px 4px 8px 12px;
 border-style: dotted;
}

１つのスタイルを指定した場合はすべての辺に同じスタイルが適用されます。

辺によってスタイルを変えたい場合は半角スペースで区切って上・右・下・左（時計回り）の順で指定します。

初期値は「none（非表示）」なので、これらを同時に指定する必要があります。

div {
 border-width: 1px;
 border-style: solid;
}

p {
 border-width: 5px;
 border-style: dotted double solid ridge;
}

１色を指定した場合はすべての辺に同じ色が適用されます。

辺によってスタイルを変えたい場合は半角スペースで区切って上・右・下・左（時計回り）の順で指定します。

初期値は「none（非表示）」なので、これらを同時に指定する必要があります。

指定方法	説明
カラーコード	ハッシュ「#」で始まる３桁もしくは６桁のカラーコードを指定
RGB値	「rgb」から書き始め、赤、緑、青の値を「,（カンマ）」で区切って指定。透明度も含める場合は「rgba」から書き始め、赤、緑、青、透明度の値を「,（カンマ）」で区切って指定。透明度は０〜１の間で記述する
色の名前	「red」、「blue」などの決められた色の名前を指定

div {
 border-style: solid;
 border-color: red;
}

p {
 border-style: dotted;
 border-color: red blue green black;
}