In CSS, the border-bottom-style property specifies the type of line (solid, dotted, dashed, double, etc.) drawn along the bottom edge of an element, thereby controlling its overall design.
border-bottom-style プロパティは、要素の下辺（ボトム）のボーダーの「線のスタイル」を指定するためのCSSプロパティです。ボーダーは、HTML要素の枠線を設定する際に使われるプロパティで、上下左右に独立してスタイルを指定することが可能です。
たとえば、すべての辺に同じスタイルを指定したい場合は border-style を用いれば足りますが、下辺だけ別のスタイルにしたい場合や、他の辺と区別してデザインしたい場合にこの border-bottom-style が役立ちます。
border-style を指定していても、一部だけ異なるスタイルを適用したいときにも有用です。CSS
.my-element {
border-bottom-style: solid;
}この指定を行うと、.my-element クラスを持つ要素の下辺に、実線のボーダーが引かれるようになります。ただし、この状態では単に「線のスタイル」しか決めていないため、実際には線幅（border-bottom-width）や線色（border-bottom-color）を同時に指定することが一般的です。
CSS
.my-element {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #333;
}これらをまとめて書くならば、以下のように1行で指定することも可能です
CSS
.my-element {
border-bottom: 2px solid #333;
}しかし、学習の段階では個別プロパティで意味を把握してからまとめて書く方が理解しやすい場合もあります。
border-style 系列のプロパティには、共通して以下のような値が利用できます。具体的に border-bottom-style だけを指定する場合でも、同じ値を使うことができます。
border-bottom-width を指定していても、このスタイルを指定すれば表示されない。none に似ているが、テーブル表示時などに特殊な意味合いを持つ。通常は none と同様に見た目としては何も描画されない。groove の反転。盛り上がっているように描画される。この中で、よく使われるのは none, solid, dashed, dotted, double あたりです。groove, ridge, inset, outset は、ブラウザの実装依存が若干あるため、ブラウザ間で見え方に差異が出る可能性があります。
border-bottom-width は、実際には数値（px, em, rem など）で指定します。しかし、border-bottom-style が none や hidden の場合、幅を指定していても表示はされません。一方、dotted や dashed では、幅が大きすぎると点や破線の表示が微妙な見た目になったり、途切れ方が期待どおりにならなかったりする場合があります。デザイン意図にあわせて調整しましょう。
border-bottom-style が有効になるには、同時に色を指定する（もしくはデフォルトの色を使用する）ことが望ましいです。border-bottom-color を指定しない場合は、要素のテキストカラー（color）が継承されるケースが多いですが、ブラウザによっては異なる動作になる場合もあります。明示的に border-bottom-color や border-color を指定することで、デザインを一貫させることができます。
要素の幅や高さを計算する際に、box-sizing プロパティを content-box にするか border-box にするかで、ボーダー幅の扱いが変わります。デザインレイアウト全体でボーダーを多用する場合は、要素のサイズ計算に影響を与えないか注意してください。
画面サイズに応じてボーダーの見え方を変えたい場合、メディアクエリと組み合わせて border-bottom-style を変更することがあります。例えば、モバイルでは solid にしておいて、タブレットやデスクトップでは double にするなど、デバイスによって強調具合を変えるのも一つの手です。
セクションタイトル
HTML
<p class="section-heading">セクションタイトル</p>CSS
.section-heading {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1em;
border-bottom: 2px solid #000; /* 下部に実線を引く */
}見出しの下部に実線のボーダーを引くことによって、コンテンツの区切りがわかりやすくなる効果があります。border-bottom-style は solid ですが、デザインによっては dashed や double に変更しても良いでしょう。
HTML
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>CSS
nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
nav li a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
border-bottom: 3px solid transparent; /* 初期は線を透明にしておく */
transition: border-color 0.3s ease; /* ホバー時のアニメーション */
}
nav li a:hover {
border-bottom-style: solid;
border-bottom-color: #007BFF; /* ホバー時に色を付ける */
}このように、初期状態では線を見せずに、ホバー時にボーダーを表示することでシンプルなマウスオーバーエフェクトを実現できます。ここでは border-bottom-style を solid と指定して、色を変化させています。
| 項目A | 項目B |
|---|---|
| データ1 | データ2 |
| データ3 | データ4 |
HTML
<table class="styled-table">
<tr>
<th>項目A</th>
<th>項目B</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>CSS
.styled-table tr {
border-bottom: 2px dashed; /* 行を区切るために破線を使用 */
}テーブルの場合も、border-bottom-style を上書きしたり、まとめて border-bottom で指定して行の区切りをわかりやすくするといった用途で使えます。
groove や ridge などの立体的な見え方をするスタイルは、ブラウザによってレンダリングが異なる場合があります。デザイナーとの連携時は、期待する見た目が再現できているかどうかを実機確認することをおすすめします。border-style: solid; と書いたうえで border-bottom-style: dashed; を指定すると、下辺に関しては後者の指定（dashed）が優先されます。このように「個別指定 > 一括指定」という優先度になるのはCSSの基本的な仕組みです。table 要素や tr 要素に対して指定する方法など、複数のやり方があります。どこに指定するかで思った通りの線が表示されなかったり、重複して線が表示されたりする可能性があるため、注意深く設定しましょう。border-bottom-width と組み合わせるとよいでしょう。border-bottom-style は同じでも、線幅の変更だけでデザインを切り替えることもできます。border-bottom-style の指定が印刷時にわかりやすいかどうかも考慮します。dotted や dashed は印刷では潰れる・見えにくいことがあるため、solid に切り替えるなどの配慮が必要な場合があります。要素の本来の border-bottom ではなく、::before や ::after などの擬似要素を利用して「下線のように見える装飾」を作るケースがあります。これは border-bottom-style を使わずにデザインを実現する別の手法ですが、レイアウトを崩さず装飾を加えたいときなどに有用です。
Title
HTML
<p class="title">Title</p>CSS
.title {
position: relative;
display: inline-block;
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background-color: #333;
}ここでは実際の border-bottom ではなく、擬似要素によって線を描画しています。border-bottom-style と比較して、より自由度の高い装飾が可能です。しかし、単にシンプルな線を引きたいだけなら border-bottom-style を使う方が簡単で意図が明確になります。
前述のナビゲーション例でも触れましたが、hover 時や focus 時に border-bottom-style や border-color を変化させるアニメーションを適用することで、インタラクティブなユーザー体験を提供できます。トランジションプロパティと組み合わせると、なめらかにスタイルが変化します。
Sample
HTML
<p class="link-hover-effect">Sample</p>CSS
.link-hover-effect {
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease, border-bottom-style 0.3s ease;
}
.link-hover-effect:hover {
border-bottom-style: solid;
border-bottom-color: #ff0000;
}クラス設計（BEMやOOCSSなど）を行う際は、ボーダースタイルだけを定義したユーティリティクラスを用意し、それを必要な要素に付与して使い回すといった方法もあります。たとえば、.border-bottom-dashed などのクラスを用意しておき、複数の要素で同じ破線のスタイルを再利用する、といった運用が考えられます。
border-bottom-style は、ほぼすべてのモダンブラウザ (Chrome, Firefox, Safari, Edge など) および Internet Explorer でも古いバージョンからサポートされています。dotted や dashed などの単純な線種については大きな差異がありませんが、立体的なボーダー (groove, ridge, inset, outset) の見え方はブラウザごとに多少異なります。
したがって、レガシーブラウザとの互換性に関してはほぼ問題ないものの、デザイン上の微妙な差異には注意が必要です。必ずしもすべてのブラウザでピクセル単位まで同じに見えるわけではない点を理解しておきましょう。
border-bottom-style は、要素の下辺に対して線の種類（実線、破線、点線、二重線、3D系など）を指定するためのプロパティ。border-bottom-width, border-bottom-color と併用し、「幅」「スタイル」「色」 の3要素を同時に扱うことが多い。none, solid, dashed, dotted, double が頻繁に使われる。border-bottom と個別指定をうまく使い分けることで、デザインに柔軟性を持たせることができる。groove, ridge, inset, outset はブラウザ依存があるため、使用時は実機での確認が望ましい。border-bottom-style は、単に下線を引くためだけではなく、要素の見た目をコントロールし、コンテンツにメリハリをつけるうえで非常に便利なプロパティです。初心者の方はまずは solid を使いこなし、徐々に dashed, dotted, double などに挑戦するとよいでしょう。中級者以上の方は、デザイン設計やアニメーションとの連携、さらにはパフォーマンスや可読性を考慮したクラス設計にも活用してみてください。