CSS

Cascading Style Sheets border-bottom-style property.

border-bottom-style

　border-bottom-styleプロパティは、下側のボーダーのスタイル（形状）を指定する際に使用します。上下左右のボーダーのスタイルをまとめて指定する際には、border-style を使用してください。

　ボックスに背景が適用されている状態で、ボーダーの領域全体を塗りつぶさない値（double, dotted, dashed）を指定すると、背景が見えるようになります。

書式

border-bottom-style: 値

適用対象

すべての要素

::fiest-letterにも適用されます。

初期値

none

値の継承

しない

指定できる値

solid

１本の実線で表示されます。

double

二重線で表示されます。

dotted

点線で表示されます。

dashed

破線で表示されます。

inset

ボーダーに囲まれた範囲全体が凹んで見えるように、上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。上下左右の一部だけに指定しても立体感は出ません。

outset

ボーダーに囲まれた範囲全体が飛び出て見えるように、上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。上下左右の一部だけに指定しても立体感は出ません。

groove

ボーダー部分が立体的に凹んだ線に見えるように表示されます。

ridge

ボーダー部分が立体的に飛び出た線に見えるように表示されます。

hidden

ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルを構成する枠線の種類が競合する場合は、この値が優先されます。

none 【初期値】

ボーダーのない状態にします。この値を指定すると、ボーダーの太さは 0 になります。テーブルを構成する枠線の種類が競合する場合は、他の値が優先されます。

使用例

.c1 {border-bottom-style:solid;}
.c2 {border-bottom-style:double;}
.c3 {border-bottom-style:dotted;}
.c4 {border-bottom-style:dashed;}
.c5 {border-bottom-style:inset;}
.c6 {border-bottom-style:outset;}
.c7 {border-bottom-style:groove;}
.c8 {border-bottom-style:ridge;}
.c9 {border-bottom-style:hidden;}
.c10 {border-bottom-style:none;}

<p class="c1">solid</p>
<p class="c2">double</p>
<p class="c3">dotted</p>
<p class="c4">dashed</p>
<p class="c5">inset</p>
<p class="c6">outset</p>
<p class="c7">groove</p>
<p class="c8">ridge</p>
<p class="c9">hidden</p>
<p class="c10">none</p>