CSS
CSS's border-left-style is a property used to individually specify the "type of line" for the border on the left side of an element.
border-left-style
border-left-styleプロパティは、要素の左側のボーダー線のスタイルを指定するためのものです。border-styleの一部として、ボーダーの線種を細かく制御できます。
ボックスに背景が適用されている状態で、ボーダーの領域全体を塗りつぶさない値（double, dotted, dashed）を指定すると、背景が見えるようになります。
基本的な役割と概要
- プロパティ名
- border-left-style
- 役割
- 要素の左側に適用されるボーダー線（境界線）の「形状(スタイル)」を指定する
- 値の継承
- されない（inherit ではない）
- 初期値
- none
- （CSSで明示的に指定しない場合、多くのブラウザでボーダーは表示されません）
- 指定可能な場所
- ブロック要素、インライン要素、表、特に制限なくあらゆる要素に使用可能
- 対応するCSS仕様
- CSS Backgrounds and Borders Module Level 3 など
指定できる主な値とその意味
border-left-style には以下のような値を指定することが可能です。これらは border-style 全体で使用される値と同じで、左側用に限定して設定できるものです。
- none
- ボーダー線を表示しない。
- border-left-width や border-left-color が設定されていても、スタイルが none であればボーダー線は表示されません。
- hidden
- ボーダー線を表示しないが、主にテーブルの border-collapse と組み合わせる場合に特別な挙動をすることがある。
- ボーダーを「隠す」という意味合いで、テーブル表示での衝突時などに none とは少し異なる動きをします。要素を単独で使うときは none とほぼ同じように見えます。
- dotted
- 点線で描画されるボーダー。
- 小さなドット(点)が連続する線として表示されます。
- デバイスやブラウザによってドットの大きさに若干違いが出る場合があります。
- dashed
- 破線(ダッシュ)で描画されるボーダー。
- 点線（dotted）よりも長めのラインと空白が交互に描画されます。
- solid
- 一本の実線。
- もっとも一般的に使われるスタイルで、太さや色に応じて直線が描かれます。
- double
- 二重線。
- 指定した太さ（border-left-width）を2本の線として描画します。太い線では間の隙間が大きくなるので、表示具合には注意が必要です。
- groove
- 彫り込み(溝)のように見える3D風の線。
- ブラウザによって色のハイライトや影が付けられ、くぼんでいるような外観になります。
- ridge
- 浮き彫り（隆起）のように見える3D風の線。
- groove の逆パターンで、膨らんでいるような外観になります。
- inset
- 内側に押し込まれたように見える3D風の線。
- 要素の外枠がへこんでいるように見えます。
- outset
- 外側に盛り上がったように見える3D風の線。
- 要素の外枠が飛び出しているように見えます。
これらの3D系（groove, ridge, inset, outset）は、ブラウザによる描画差が大きく、またボーダーの色や太さによって見え方が大きく変わる点に注意が必要です。
その他のボーダープロパティとの関係
border-left-style は、左側の線種だけを個別に設定するためのプロパティです。他にも左側のボーダーに特化したプロパティがあります。
- border-left-width
- 左ボーダー線の太さを指定
- border-left-color
- 左ボーダー線の色を指定
- border-left
- 左ボーダーに関する (太さ, スタイル, 色) をまとめて指定できるショートハンド
これらを組み合わせて使用すると、より柔軟にデザインできます。
ショートハンドとの組み合わせ例
/* 個別プロパティで指定する場合 */
.my-element {
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #ff0000;
}
/* ショートハンド border-left でまとめて指定する場合 */
.my-element {
border-left: 2px dotted #ff0000;
}
ショートハンドでは順序は「太さ → スタイル → 色」が一般的ですが、実際には「スタイル → 色 → 太さ」でもブラウザがある程度認識してくれます。可読性を上げるためにも、慣例的には太さ・スタイル・色の順番で書くことが推奨されています。
ボーダー全体をコントロールする border-style との違い
border-style は「上下左右」すべてのボーダーに一括してスタイルを指定するプロパティです。具体的には、以下のような指定方法があります。
/* すべての辺を同じスタイルにする */
border-style: solid;
/* 上・右・下・左の順番で異なるスタイルを指定する */
border-style: dotted dashed solid none;
このようにボーダーの上下左右を個別に設定可能ですが、より細かく制御したい場合は border-left-style のように方向別のプロパティを使用すると便利です。
初期値や継承動作の注意点
- 先述の通り、border-left-style の初期値は none です。
- 親要素からボーダーの設定が継承されるわけではなく、各要素ごとに指定しなければ基本的には線は表示されません。
- 継承を強制したい場合は inherit キーワードを使う手段もありますが、デザイン的にはあまり一般的ではありません。
ボーダーが描画される仕組みと表示されないケース
- スタイルが none か hidden の場合
- → ボーダー線は表示されない。
- スタイルがあっても、border-left-width が 0 か設定されていない場合
- → デフォルトでは width が 0 でもスタイルが指定されていれば極細線として描画するブラウザが多いが、明示的に 0 や数値を指定している場合は見えなくなることがある。
- 色が透明 (transparent) の場合
- → 実質的にボーダーが見えなくなるが、スタイルは適用されているので他の要素との重なりなどで微妙な影響を及ぼすことがあります。
テーブルレイアウトと border-left-style: hidden の関係
border-left-style: hidden は、主にテーブルレイアウト時の「ボーダー衝突 (border conflict)」ルールに影響します。
- hidden を指定すると、テーブルにおいては「衝突した場合には何も表示しない」動作が優先されます。
- none は「そもそもボーダーがない」という意味合いですが、テーブル全体の衝突ルールでは hidden を優先して表示を抑制する場合があるため、意図的に利用されるケースもあります。
ブラウザ互換性
- 主要ブラウザ(Chrome, Firefox, Safari, Edge, Opera) で一般的にすべての値 (none, hidden, dotted ... ) がサポートされています。
- 3D系の描画( groove, ridge, inset, outset ) はブラウザ間で見え方が多少異なることに留意が必要です。
- 古いブラウザを考慮する場合でも、このプロパティが未サポートということはほぼありません。安心して利用できます。
実用的な使用例
メニューの左枠だけを点線にしたい場合
メニューやリスト項目同士を区切るときなどに有効です。
メニュー項目(.nav-item)の左側だけ点線を表示して、border-left-style: dotted; の効果を視覚的にわかりやすくしています。
- Home
- About
- Services
- Contact
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
.nav-item {
list-style-type: none; /* リストマークを消す */
padding-left: 1em; /* テキストの左側にスペース */
border-left-width: 2px; /* ボーダーの太さ */
border-left-style: dotted; /* 点線を指定 */
border-left-color: #666; /* ボーダーの色 */
}
- padding-left: 1em;
- ボーダーと文字が重ならないように、テキストを少し右にずらしています。
- border-left-style: dotted;
- メニュー項目の左側だけ点線が引かれ、見た目にもわかりやすく仕切りとして機能します。
サイドバーの区切りを太線で強調したい場合
サイドバーのコンテンツをメイン部分とビジュアル的に区分するのに便利です。
サイドバー(.sidebar)の左側だけ太線で表示し、border-left-style: solid; の挙動をわかりやすく示しています。シンプルにページを２カラムに見立て、左側がサイドバー、右側がメインコンテンツになるようにしています。
メインコンテンツ
サイドバーの左側に太線が入っていることで、見た目の仕切りとしてわかりやすくなっています。
<div class="sidebar">
<h2>サイドバー</h2>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</div>
<div class="content">
<h2>メインコンテンツ</h2>
<p>サイドバーの左側に太線が入っていることで、見た目の仕切りとしてわかりやすくなっています。</p>
</div>
/* サイドバーを強調 */
.sidebar {
border-left: 5px solid #666; /* 太めの実線 */
padding-left: 1em; /* テキストを少し右へずらす */
width: 150px; /* 幅を固定 */
min-height: 180px; /* コンテンツ量が少なくても最低の高さを確保 */
float: left; /* 左に寄せて配置 (簡易的なレイアウト) */
}
/* メインコンテンツ部分 */
.content {
margin-left: 180px; /* サイドバーの幅だけ左に余白を取る */
padding: 1em;
}
- .sidebar では、border-left プロパティをまとめて使用していますが、内訳は border-left-style: solid;、border-left-width: 5px;、border-left-color: #333; です。
- 太めの実線によってサイドバーエリアが強調され、見た目がすっきりと区切られます。
テーブルの特定列にだけスタイルを適用する場合
テーブルセル単位で左ボーダーを付けることで視覚的に分割を行う例です。
テーブルの２列目だけに左ボーダーを適用し、border-left-style として double を設定することで、ほかの列とは異なる線を表示しています。
| 見出し1 |
見出し2 |
見出し3 |
| Row1-Col1 |
Row1-Col2 |
Row1-Col3 |
| Row2-Col1 |
Row2-Col2 |
Row2-Col3 |
| Row3-Col1 |
Row3-Col2 |
Row3-Col3 |
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>Row1-Col1</td>
<td>Row1-Col2</td>
<td>Row1-Col3</td>
</tr>
<tr>
<td>Row2-Col1</td>
<td>Row2-Col2</td>
<td>Row2-Col3</td>
</tr>
<tr>
<td>Row3-Col1</td>
<td>Row3-Col2</td>
<td>Row3-Col3</td>
</tr>
</table>
table {
border-collapse: collapse; /* セルの余白をなくして枠線をくっつける */
margin: 1em auto; /* ページ中央寄せ */
width: 80%;
}
th, td {
border: 1px solid #ccc; /* 通常のセル枠線 */
padding: 0.5em 1em;
text-align: center;
}
/* 2列目だけに左ボーダーを適用 */
th:nth-child(2),
td:nth-child(2) {
border-left: 6px double #888; /* 太めの二重線を指定 */
}
- th, td に通常の枠線（solid #ccc）を指定する一方、2列目のみ border-left: 6px double #888; として太めの二重線を表示しています。
- こうすることで、２列目だけが強調表示され、border-left-style: double; の見た目の違いが明確にわかります。
よくある疑問・注意点
- ほかのボーダーとの優先順位
- border-left-style が指定されていれば、border-style（ shorthand の一括指定を含む ）で左辺に対して上書き指定しない限り、border-left-style の値が適用されます。
- none と hidden の違い
- 見た目はどちらも表示されませんが、テーブルレイアウトや印刷レイアウトなどでは振る舞いが違うことがあります。
- 一般的なブロック要素やインライン要素で単純に「ボーダーを消す」用途であれば、none を使うことがほとんどです。
- 3D系ボーダーの見え方
- groove や ridge などはブラウザ依存が大きく、また背景色や要素の周囲の配色によって認識しづらいことがあります。
- 近年のWebデザインではあまり使用されないことが多く、代わりに box-shadow などで3D効果を表現するケースも多いです。
- レスポンシブデザインやアプリUIにおける実用度
- border-left-style のみを変更するケースは多々ありますが、単純な solid や dotted が大半です。
-
- 最近は境界線よりも余白（マージンやパディング）と背景色を駆使して区切るデザインも一般的です。
まとめ
border-left-style は、要素の左側のボーダーのスタイル(線種)を指定するための便利なプロパティです。solid や dotted、dashed などシンプルな線種から、3D風に見せる inset, outset, groove, ridge まで、多彩なバリエーションを選択できます。また、border-left-width や border-left-color と組み合わせることで多彩な表現が可能になります。
実用上はシンプルなデザイン（solid や dotted）がほとんどですが、他の線種や hidden のような特殊な値は、テーブルなど特定のレイアウトを扱うときに役立ちます。バージョンの古いブラウザでもほぼ問題なくサポートされているため、安心して利用できるプロパティといえるでしょう。
