CSS

The border-bottom property in CSS specifies a line (border) at the bottom edge of an element, allowing you to set its color, thickness, and style.

border-bottom

　border-bottomプロパティは、下側のボーダーのスタイル・太さ・色をまとめて指定する際に使用します。スタイル・太さ・色の各プロパティで指定できる値のうち、必要なものを半角スペースで区切って複数指定できます。指定する順序は自由です。指定しない値はそれぞれのプロパティの初期値になります。

書式

border-bottom: 値（複数可）;

適用対象

すべての要素

初期値

各プロパティの初期値

値の継承

しない

指定できる値

border-color プロパティの値

「 ボーダー色 」を設定する場合と同様の値が指定できます。

色

ボーダーの色を RGB 値（#000000 などの記述）やカラーネーム（black など）で色を指定します。詳しい指定方法については「色の指定方法（単位）」を参照してください。

transparent

ボーダーの色を透明にします。ボックスに背景が適用されている場合は、背景が透けて見える状態になります。

border-width プロパティの値

「 ボーダーの太さ 」を設定する場合と同様の値が指定できます。

数値で指定

数値に px や em や ex などの単位をつけて指定します。px とは１ピクセルを１とする単位で、実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。また、em とはフォントの高さを１とする単位で、ex とは小文字の「 x 」（エックス）の高さを１とする単位です。なお、マイナスの値を指定することはできません。

キーワードで指定

thin（細い）、medium（普通）、thick（太い）のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。

border-style プロパティの値

「 ボーダーの種類 」を設定する場合と同様の値が指定できます。

none

これが初期値です。ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルの border-collapse プロパティの値が「 collapse 」でテーブルを構成する枠の種類が競合する場合は、他の値が優先されます。

solid

１本線で表示します。

double

２本線で表示します。

dotted

点線で表示します。

dashed

破線で表示します。

groove

ボーダー部分が、立体的に凹んで見えるように表示します。

ridge

ボーダー部分が、立体的に飛び出して見えるように表示します。

inset

上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーに囲まれた範囲全体が立体的に凹んで見えるように表示します。上下左右の一部にだけ指定しても立体感は出ません。テーブルの border-collapse プロパティの値が「 collapse 」の場合は、「 groove 」と同様に表示されます。

outset

上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーに囲まれた範囲全体が立体的に飛び出て見えるように表示します。上下左右の一部にだけ指定しても立体感は出ません。テーブルの border-collapse プロパティの値が「 collapse 」の場合は、「 ridge 」と同様に表示されます。

hidden

ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルの border-collapse プロパティの値が「 collapse 」でテーブルを構成する枠の種類が競合する場合は、この値が優先されます。

使用例

ボーダーで横罫線を引く

　HTMLの hr要素を使わずに、ボーダーを利用して横罫線を引いた例です。

h1 {
	padding-bottom: 0.5em;
	border-bottom: 4px solid #339900;
}
p { padding-bottom: 1em }
.c1 { border-bottom: 4px groove #339900 }
.c2 { border-bottom: 4px ridge #339900 }
.c3 { border-bottom: 4px dashed #339900 }
.c4 { border-bottom: 4px dotted #339900 }

<h1>見出し</h1>
<p class="c1">ここは段落です。</p>
<p class="c2">ここは段落です。</p>
<p class="c3">ここは段落です。</p>
<p class="c4">ここは段落です。</p>

見出しへの適用例

　見出しの上下に 1 ピクセルの線を引き、テキストの文字間隔を広くした例です。

h1 {
	padding: 0.1em;
	text-align: center;
	letter-spacing: 1ex;
	border-top: 1px solid #339900;
	border-bottom: 1px solid #339900;
}

<h1>headings</h1>

見出しへの適用例2

　見出しの左側のボーダーを太くし、下側のボーダーを 1 ピクセルにした例です。

h1 {
	font-size: large;
	padding-left: 0.3em;
	border-left: 1em solid #ff3300;
	border-bottom: 1px solid #ff3300;
}

<h1>見出しサンプル</h1>

インライン要素への適用例

　インライン要素である em要素にボーダーを適用した例です。

em {
	font-style: normal;
	font-weight: bold;
	border-bottom: 2px dotted #ff0000;
}

<p>　ボーダーは、インライン要素にも適用できます。たとえば、この例では<em>強調部分</em>の下に赤い点線を表示させています。</p>

リンクの下線を点線にする

　リンク部分のテキストに適用した例です。テキストの下線を消した上で、ボックスの下のボーダーを 2 ピクセルの点線で表示させています。また、カーソルが当たっている時は実線となるように設定しています。

a { text-decoration: none }
a:link {
	border-bottom: 2px dotted;
}
a:visited {
	border-bottom: 2px dotted;
}
a:hover {
	border-bottom: 2px solid;
}

<p><a href="a.html">リンクＡ</a> | <a href="b.html">リンクＢ</a> | <a href="c.html">リンクＣ</a></p>