CSS

Cascading Style Sheets border-bottom-width property.

border-bottom-width

　下側のボーダーラインの太さを指定するプロパティです。

　border-bottom-widthプロパティは、下ボーダーの太さを指定する際に使用します。 上下左右のボーダーの太さをまとめて指定する際には、border-width を使用してください。

書式
border-bottom-width: 値
適用対象
すべての要素
初期値
medium
値の継承
しない
指定できる値
実数 + 単位
実数に em、pt、px などの単位をつけて指定できます。マイナスの値と単位に % は指定できません。尚、pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。
thin, medium, thick
太さはキーワードで指定することもできます。thin は細いボーダー、medium は中位のボーダー、thick は太いボーダーに設定しますが、キーワードで指定する場合は、具体的な太さはブラウザによって異なります。

使用例

CSS source


p {
	border-style: solid;
}
p.sample1 {
	border-bottom-width: 6px;
}
p.sample2 {
	border-bottom-width: 1em;
}
p.sample3 {
	border-bottom-width: thin;
}
p.sample4 {
	border-bottom-width: medium;
}
p.sample5 {
	border-bottom-width: thick;
}

HTML source


<p class="sample1">下側のボーダーの太さに 6px を指定しています。</p>
<p class="sample2">下側のボーダーの太さに 1em を指定しています。</p>
<p class="sample3">下側のボーダーの太さに thin を指定しています。</p>
<p class="sample4">下側のボーダーの太さに medium を指定しています。【初期値】</p>
<p class="sample5">下側のボーダーの太さに thick を指定しています。</p>

Sample

下側のボーダーの太さに 6px を指定しています。

下側のボーダーの太さに 1em を指定しています。

下側のボーダーの太さに thin を指定しています。

下側のボーダーの太さに medium を指定しています。【初期値】

下側のボーダーの太さに thick を指定しています。