CSS

この記事では、要素の下側に引く線の種類を決めるCSSのborder-bottom-styleを説明します。

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

border-bottom-style とは

border-bottom-style プロパティは、要素の下辺（ボトム）のボーダーの「線のスタイル」を指定するためのCSSプロパティです。ボーダーは、HTML要素の枠線を設定する際に使われるプロパティで、上下左右に独立してスタイルを指定することが可能です。

たとえば、すべての辺に同じスタイルを指定したい場合は border-style を用いれば足りますが、下辺だけ別のスタイルにしたい場合や、他の辺と区別してデザインしたい場合にこの border-bottom-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;
}

border-bottom-width: ボトムの線幅（太さ）を指定
border-bottom-style: ボトムの線種を指定
border-bottom-color: ボトムの線色を指定

これらをまとめて書くならば、以下のように1行で指定することも可能です

CSS

.my-element {
	border-bottom: 2px solid #333;
}

しかし、学習の段階では個別プロパティで意味を把握してからまとめて書く方が理解しやすい場合もあります。

border-bottom-style で使用できる主な値

border-style 系列のプロパティには、共通して以下のような値が利用できます。具体的に border-bottom-style だけを指定する場合でも、同じ値を使うことができます。

none: ボーダー（下線）を表示しない。border-bottom-width を指定していても、このスタイルを指定すれば表示されない。
hidden: none に似ているが、テーブル表示時などに特殊な意味合いを持つ。通常は none と同様に見た目としては何も描画されない。
dotted: 点線で表示される。丸いドットが等間隔で並んだ形状。
dashed: 破線で表示される。やや角ばった印象の破線が描画される。
solid: 実線で表示される。一番よく使われる基本的なスタイル。
double: 二重線で表示される。線幅を十分にとると、2本線がはっきりとわかる。
groove: 凹んでいるようなボーダーを表現する。テーマによってはブラウザによるレンダリング差がある。
ridge: groove の反転。盛り上がっているように描画される。
inset: 要素が押し込まれているように描画される。
outset: 要素が浮き上がっているように描画される。

この中で、よく使われるのは none, solid, dashed, dotted, double あたりです。groove, ridge, inset, outset は、ブラウザの実装依存が若干あるため、ブラウザ間で見え方に差異が出る可能性があります。

より詳しい解説

width と style の関係

border-bottom-width は、実際には数値（px, em, rem など）で指定します。しかし、border-bottom-style が none や hidden の場合、幅を指定していても表示はされません。一方、dotted や dashed では、幅が大きすぎると点や破線の表示が微妙な見た目になったり、途切れ方が期待どおりにならなかったりする場合があります。デザイン意図にあわせて調整しましょう。

border の色指定との組み合わせ

border-bottom-style が有効になるには、同時に色を指定する（もしくはデフォルトの色を使用する）ことが望ましいです。border-bottom-color を指定しない場合は、要素のテキストカラー（color）が継承されるケースが多いですが、ブラウザによっては異なる動作になる場合もあります。明示的に border-bottom-color や border-color を指定することで、デザインを一貫させることができます。

box-sizing とボーダー

要素の幅や高さを計算する際に、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 と併用したときの優先順位: 例えば、border-style: solid; と書いたうえで border-bottom-style: dashed; を指定すると、下辺に関しては後者の指定（dashed）が優先されます。このように「個別指定 > 一括指定」という優先度になるのはCSSの基本的な仕組みです。
テーブル要素での実装: テーブルにはセルごとにボーダーを指定する方法、table 要素や tr 要素に対して指定する方法など、複数のやり方があります。どこに指定するかで思った通りの線が表示されなかったり、重複して線が表示されたりする可能性があるため、注意深く設定しましょう。
Responsive で線幅が変化する場合: 画面幅が小さいデバイスでは細い線の方が見やすく、大きい画面ではやや太い線の方がデザインとして映える場合があります。そのときはメディアクエリを使って 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) の見え方はブラウザごとに多少異なります。

したがって、レガシーブラウザとの互換性に関してはほぼ問題ないものの、デザイン上の微妙な差異には注意が必要です。必ずしもすべてのブラウザでピクセル単位まで同じに見えるわけではない点を理解しておきましょう。

Data on support for the mdn-css__properties__border-bottom-style feature across the major browsers from caniuse.com

まとめ

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 などに挑戦するとよいでしょう。中級者以上の方は、デザイン設計やアニメーションとの連携、さらにはパフォーマンスや可読性を考慮したクラス設計にも活用してみてください。