border-bottom-styleプロパティの説明
CSSのborder-bottom-styleプロパティは、要素の下辺に設定した境界線（外枠、枠線）の形状を指定します。スタイルの種類は、あらかじめ用意されているキーワードから選択します。この値を明示しない限り、要素の境界線は初期値がnoneであるため、表示されない点に注意してください。
上下左右すべての境界線の形状を一括で指定する場合はborder-styleを、それ以外の値も含めて一括で指定する場合はショートハンド・プロパティのborderを使用してください。
ほかの辺に表示される境界線の形状を指定する場合は、以下のいずれかのプロパティを使用します。
border-top-style：上辺の境界線の形状を指定するborder-right-style：右辺の境界線の形状を指定するborder-bottom-style：下辺の境界線の形状を指定するborder-left-style：左辺の境界線の形状を指定する
border-bottom-styleに指定できる値
<line-style>- 境界線の形状を指定するキーワード型の値です。使用できるキーワードには以下のものがあります。
none- 境界線を表示しません。この値が指定されていると、
border-widthの太さは0になります。テーブルのセルがcollaspedで表示される場合は、競合するセルの境界線が優先されます。これが初期値です。 hidden- 境界線を隠します。この値が指定されていると、
border-widthの太さは0になります。テーブルのセルがcollaspedで表示される場合は、競合するセルの境界線を打ち消して表示させません。 solid- 境界線を実線で表示します。線を太くすると平面的な直線となります。
dashed- 境界線を断続的に切れた線で表示します。線の太さによって点線や破線に見えます。線と線の間隔はブラウザの実装に依存します。
dotted- 境界線を連続する丸い点で表示します。点の直径は
border-widthで指定した太さになり、点と点の間隔はブラウザの実装に依存します。 double- 境界線を二重の直線で表示します。
border-widthの値をできる限り三等分にし、直線と隙間を等間隔で並べます。つまり、二本の直線と隙間の合計値が線の幅とみなされます。 groove- 境界線の中央が凹んでいるように見える直線を表示します。光源が右下に置かれており、左上に影が落ちます。この時、
border-colorで指定した色は自動的に調整され、立体的に見えます。表現的にはridgeの逆です。 ridge- 境界線の中央が隆起しているように見える直線を表示します。光源が左上に置かれており、右下に影が落ちます。この時、
border-colorで指定した色は自動的に調整され、立体的に見えます。表現的にはgrooveの逆です。 inset- 要素が押し込まれて見えるように明暗を分けた境界線を表示します。上下左右の境界線の色味は
border-colorで指定した値を基準に自動的に調整されます。表現的にはoutsetの逆です。 outset- 要素が出っ張って見えるように明暗を分けた境界線を表示します。上下左右の境界線の色味は
border-colorで指定した値を基準に自動的に調整されます。表現的にはinsetの逆です。
border-bottom-styleの使い方とサンプルコード
border-bottom-styleプロパティの構文は以下の通りです。
/* キーワード値 */
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: solid;
border-bottom-style: dashed;
border-bottom-style: dotted;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;
/* グローバル値 */
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: revert;
border-bottom-style: unset;
border-bottom-styleの実例
それでは簡単な例を見てみましょう。ここでは、要素の下辺だけに境界線を表示した場合の挙動を確かめます。groove、ridge、inset、outsetは立体的な表現であるため、全ての辺に適用しなければ効果が得られません。
<section class="samp_box">
<p>border-bottom-style</p>
<div id="border_1">solid</div>
<div id="border_2">dashed</div>
<div id="border_3">dotted</div>
<div id="border_4">double</div>
<div id="border_5">groove</div>
<div id="border_6">ridge</div>
<div id="border_7">inset</div>
<div id="border_8">outset</div>
</section>
.samp_box {
padding: 0 1rem;
text-align: center;
}
.samp_box > div {
margin: 1rem auto 0 auto;
padding: 2rem 1rem;
background-color: #eee;
border-bottom-width: 3px;
}
#border_1 {
border-bottom-style: solid;
}
#border_2 {
border-bottom-style: dashed;
}
#border_3 {
border-bottom-style: dotted;
}
#border_4 {
border-bottom-style: double;
}
#border_5 {
border-bottom-style: groove;
}
#border_6 {
border-bottom-style: ridge;
}
#border_7 {
border-bottom-style: inset;
}
#border_8 {
border-bottom-style: outset;
}
続いてnoneとhiddenの違いについて確認します。この二つは、どちらも境界線を表示させないという値ですが、要素同士が隣接するテーブルなどの場合に違いが現れます。具体的には、noneは競合するボーダーに影響を与えませんが、hiddenは競合するボーダーも一緒に隠します。
<table class="samp_table">
<caption>全て表示</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<table class="samp_table" id="tb_1">
<caption>border-bottom-style: none;</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<table class="samp_table" id="tb_2">
<caption>border-bottom-style: hidden;</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
.samp_table {
margin: 1rem auto 0 auto;
width: 80%;
border: none;
border-collapse: collapse;
text-align: center;
}
.samp_table td {
padding: .5rem;
border-top: 3px solid #fc605b;
border-right: 3px solid #fcc15b;
border-bottom: 3px solid #76fc5b;
border-left: 3px solid #5b96fc;
}
#tb_1 td {
border-bottom-style: none;
}
#tb_2 td {
border-bottom-style: hidden;
}