border : 境界線の幅・スタイル・色をまとめて設定する

border

要素の周囲に表示される境界線の幅・スタイル・色をまとめて設定します。
border属性はmargin属性やpadding属性などとは違って上下左右に個別の値を設定することができず、4方向とも同じ値が設定されます。
各方向に別々の値を設定したい場合は、border-top・border-bottom・border-left・border-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;

■ 表示される内容

省略された色と幅はデフォルト値になります。

border

パラメータの設定

境界線の幅

境界線のスタイル

境界線の色

利用例

関連する属性