border

要素の周囲に表示される境界線の幅・スタイル・色をまとめて設定します。
border属性はmargin属性やpadding属性などとは違って上下左右に個別の値を設定することができず、4方向とも同じ値が設定されます。
各方向に別々の値を設定したい場合は、border-topborder-bottomborder-leftborder-rightなどを使用します。
border: 10px solid red;
これは境界線の幅を10ピクセル、スタイルを実線、色を赤色に設定する記述です。
幅・スタイル・色の3つのパラメータをスペースで区切って記述します。
パラメータを記述する順番は特に決まっておらず、また3つすべて記述する必要もなく省略することも可能です。
border:10px solid;
これは境界線の色の設定を省略した場合の記述です。
省略したパラメータはデフォルトの値が使用されます。

パラメータの設定

境界線の幅

基本的に数値で指定します。
border: 10px;
border: 5em;
border: medium;
入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。

CSSで使用する長さの単位は色々ありますが、よく使用されるのは下記の2つです。
px ピクセル。ディスプレイの点を基準とした長さ。
em 要素に設定されたフォントのサイズを基準とする長さ。
フォントサイズが変わるとそれに合わせた長さとなる。
このほか、幅を設定する方法として「thin (細い)」「medium (普通)」「thick (太い)」のキーワードで指定する方法もありますが、具体的な値を設定できないため、あまり使用することはありません。

境界線のスタイル

あらかじめ定義されたスタイルを選択します。
利用できるスタイルは下記の通りです。
border: none;
border: hidden;
border: dotted;
border: dashed;
border: solid;
border: double;
border: groove;
border: ridge;
border: inset;
border: outset;
none 境界線を表示しません。境界線の幅も0になります。
hidden noneと同じく境界線を表示しません。ただしnoneと違ってtableタグで他の境界線と重なった場合でも非表示となります。
dotted 境界線を点線で描写します。
dashed 境界線を破線で描写します。
solid 境界線を実線で描写します。
double 境界線を二重線で描写します。
groove 境界線をへこんだ立体線で描写します。
ridge 境界線を出っ張った立体線で描写します。
inset 要素全体がへこんだようなデザインになる境界線を描写します。
outset 要素全体が出っ張ったようなデザインになる境界線を描写します。

境界線の色

表示される境界線の色を指定します。
border: red;
border: #FF8822;
border: rgb(255,136,34);
CSSで色を指定する具体的な方法は下記のページにてまとめて解説しています。
CSSで色を設定する方法

利用例

幅・スタイル・色を設定する
border: 10px solid red;
■ 表示される内容
色を省略して幅・スタイルのみ設定
border: 10px solid;
■ 表示される内容
省略された色はデフォルト値になります。
色・幅を省略してスタイルのみ設定
border: dashed;
■ 表示される内容
省略された色と幅はデフォルト値になります。

関連する属性