border-bottom

要素の下側に表示される境界線の幅・スタイル・色をまとめて設定します。
border-bottom: 10px solid red;
これは下側に表示される境界線の幅を10ピクセル、スタイルを実線、色を赤色に設定する記述です。
幅・スタイル・色の3つのパラメータをスペースで区切って記述します。
パラメータを記述する順番は特に決まっておらず、また3つすべて記述する必要もなく省略することも可能です。
border-bottom:10px solid;
これは境界線の色の設定を省略した場合の記述です。
省略したパラメータはデフォルトの値が使用されます。

パラメータの設定

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

CSSで使用する長さの単位は色々ありますが、よく使用されるのは下記の2つです。
px ピクセル。ディスプレイの点を基準とした長さ。
em 要素に設定されたフォントのサイズを基準とする長さ。 フォントサイズが変わるとそれに合わせた長さとなる。
このほか、幅を設定する方法として「thin (細い)」「medium (普通)」「thick (太い)」のキーワードで指定する方法もありますが、具体的な値を設定できないため、あまり使用することはありません。
境界線のスタイル
あらかじめ定義されたスタイルを選択します。
利用できるスタイルは下記の通りです。
border-bottom: none;
border-bottom: hidden;
border-bottom: dotted;
border-bottom: dashed;
border-bottom: solid;
border-bottom: double;
border-bottom: groove;
border-bottom: ridge;
border-bottom: inset;
border-bottom: outset;
none 境界線を表示しません。境界線の幅も0になります。
hidden noneと同じく境界線を表示しません。ただしnoneと違ってtableタグで他の境界線と重なった場合でも非表示となります。
dotted 境界線を点線で描写します。
dashed 境界線を破線で描写します。
solid 境界線を実線で描写します。
double 境界線を二重線で描写します。
groove 境界線をへこんだ立体線で描写します。
ridge 境界線を出っ張った立体線で描写します。
inset 要素全体がへこんだようなデザインになる境界線を描写します。
outset 要素全体が出っ張ったようなデザインになる境界線を描写します。
境界線の色
表示される境界線の色を指定します。
border-bottom: red;
border-bottom: #FF8822;
border-bottom: rgb(255,136,34);
CSSで色を指定する具体的な方法は下記のページにてまとめて解説しています。
CSSで色を設定する方法

利用例

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

関連する属性

アクセスランキング