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

border-left

要素の左側に表示される境界線の幅・スタイル・色をまとめて設定します。

border-left: 10px solid red;

これは左側に表示される境界線の幅を10ピクセル、スタイルを実線、色を赤色に設定する記述です。
幅・スタイル・色の3つのパラメータをスペースで区切って記述します。
パラメータを記述する順番は特に決まっておらず、また3つすべて記述する必要もなく省略することも可能です。

border-left:10px solid;

これは境界線の色の設定を省略した場合の記述です。
省略したパラメータはデフォルトの値が使用されます。

パラメータの設定

境界線の幅

基本的に数値で指定します。

border-left: 10px;
border-left: 5em;
border-left: medium;

入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。

CSSで使用する長さの単位は色々ありますが、よく使用されるのは下記の2つです。

px	ピクセル。ディスプレイの点を基準とした長さ。
em	要素に設定されたフォントのサイズを基準とする長さ。フォントサイズが変わるとそれに合わせた長さとなる。

このほか、幅を設定する方法として「thin (細い)」「medium (普通)」「thick (太い)」のキーワードで指定する方法もありますが、具体的な値を設定できないため、あまり使用することはありません。

境界線のスタイル

あらかじめ定義されたスタイルを選択します。
利用できるスタイルは下記の通りです。

border-left: none;
border-left: hidden;
border-left: dotted;
border-left: dashed;
border-left: solid;
border-left: double;
border-left: groove;
border-left: ridge;
border-left: inset;
border-left: outset;

none	境界線を表示しません。境界線の幅も0になります。
hidden	noneと同じく境界線を表示しません。ただしnoneと違ってtableタグで他の境界線と重なった場合でも非表示となります。
dotted	境界線を点線で描写します。
dashed	境界線を破線で描写します。
solid	境界線を実線で描写します。
double	境界線を二重線で描写します。
groove	境界線をへこんだ立体線で描写します。
ridge	境界線を出っ張った立体線で描写します。
inset	要素全体がへこんだようなデザインになる境界線を描写します。
outset	要素全体が出っ張ったようなデザインになる境界線を描写します。

境界線の色

表示される境界線の色を指定します。

border-left: red;
border-left: #FF8822;
border-left: rgb(255,136,34);

CSSで色を指定する具体的な方法は下記のページにてまとめて解説しています。
■ CSSで色を設定する方法

利用例

幅・スタイル・色を設定する

border-left: 10px solid red;

■ 表示される内容

色を省略して幅・スタイルのみ設定

border-left: 10px solid;

■ 表示される内容

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

色・幅を省略してスタイルのみ設定

border-left: dashed;

■ 表示される内容

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

border-left

パラメータの設定

利用例

関連する属性