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

border-top

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

border-top: 10px solid red;

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

border-top:10px solid;

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

パラメータの設定

境界線の幅

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

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

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

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

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

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

境界線のスタイル

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

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

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

境界線の色

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

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

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

利用例

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

border-top: 10px solid red;

■ 表示される内容

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

border-top: 10px solid;

■ 表示される内容

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

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

border-top: dashed;

■ 表示される内容

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

border-top

パラメータの設定

利用例

関連する属性