border-bottom

style.css

/* スタイルのみ指定 */
div.test { border-bottom: dashed;}

/* スタイル + 幅を指定 */
div.test1 { border-bottom: dashed 2px;}

/* スタイル + 幅 + 色をまとめて指定 */
div.test2 { border-bottom: solid 2px #000;}

/* 下線ベースのリンクスタイル実践例 */
a.underline-link {
	text-decoration: none;
	border-bottom: 1px solid #0077cc;
}
a.underline-link:hover { border-bottom: 2px solid #0077cc;}

/* テーブルの行区切り線（上辺と下辺だけ） */
td {
	border-bottom: 1px solid #ddd;
	padding: 8px 12px;
}

/* 見出しの下にアクセントラインを引く実践例 */
h2.accent {
	border-bottom: 4px solid #ff6600;
	padding-bottom: 8px;
}

/* 下ボーダーだけ残してボックス感を薄める */
.input-field {
	border: none;
	border-bottom: 2px solid #ccc;
	outline: none;
	padding: 4px 0;
}

値	概要
transparent	境界線を透明色に指定します。
カラーコード、もしくはカラーネーム	境界線を指定した色へ変更します。『border-color』に関する項目が指定されていない場合は『color』プロパティに指定されている色が初期値となります。

値	概要
none	境界線描写をしません。太さも0となります。これが初期値です。
solid	1本の線で描写されます。
dashed	隙間が大きめの破線で境界線を描写します。
dotted	隙間が小さめの破線で境界線を描写します。
double	2本の線で描写されます。
groove	彫り込まれているような境界線で描写されます。『ridge』と逆の描写です。
ridge	彫り上がっているような境界線で描画されます。『groove』と逆の描写です。
inset	埋め込みされているような境界線で描写されます。『outset』と逆の描写です。
outset	浮き上がっているような境界線で描写されます。『inset』と逆の描写です。

値	概要
数値	境界線の太さを『px』などで指定できます。
thin	『thin』(細い)というキーワードで指定します。一般的なブラウザでは1pxで表示されますがブラウザによって多少の差があります。
medium	『medium』(中間)というキーワードで指定します。一般的なブラウザでは3pxで表示されますがブラウザによって多少の差があります。『border-width』に関する値が指定されていない場合はこれが初期値となります。
thick	『thick』(厚い)というキーワードで指定します。一般的なブラウザでは5pxで表示されますがブラウザによって多少の差があります。

<div style="border-bottom: none; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: solid 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: dashed 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: dotted 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: double 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: groove 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: ridge 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: inset 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

<div style="border-bottom: outset 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

※ バージョン情報は MDN に基づいています。

境界線に関するプロパティである『border-color』プロパティ、『border-style』プロパティ、『border-width』プロパティをまとめて指定できます。 指定の順番は順不同で問題ありません。

『border-bottom』プロパティを記述した場合、値として指定していない下部の境界線に関する項目は初期値としてリセットされます。『border-bottom』プロパティを記述した場合、前に書いてある下部の境界線に関する項目は全てリセットされるということになります。

<div style="border-width: 10px; border-style: dashed; border-bottom: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

下部の境界線を何かしら表示したい場合、『border-style』プロパティに関する項目は必ず指定する必要があります。『border-style』プロパティの初期値は太さ0の『none』となっている為、何かの値を指定しない限り境界線の描写は行われません。