In CSS, the border-left property allows you to set the border (its width, color, and style) solely on the left side of an element, all at once.
役割と概要
border-leftプロパティは、要素の左辺にのみ境界線（ボーダー）を設定するためのCSSプロパティです。通常は、以下の3つの要素（またはその一部）を指定できます。
これらをまとめて、border-leftという1つのプロパティで設定することができます。
CSS
/* 実際の書き方(例) */
.element {
border-left: 3px solid red;
}上述の例では、左側だけに「太さ3px」「実線（solid）」「赤色」の線を適用しています。
CSSには四方向それぞれに対応するショートハンド（border-left, border-right, border-top, border-bottom）と、全方向を一括設定する総合的なショートハンド（border）があります。border-leftは、左辺のみの見た目を詳細にコントロールしたい場合に利用されます。
ショートハンド構文
CSS
.selector {
border-left: <border-width> <border-style> <border-color>;
}CSS
/* 左側の境界線を3pxの青色の実線にする */
.my-box {
border-left: 3px solid blue;
}このように、border-leftプロパティは幅・スタイル・色をまとめて一括指定します。ただし、これらを個別に指定するやり方もあります。
border-leftを使う代わりに、次の個別プロパティで細かく指定することもできます。
左辺のボーダー幅を指定します。
CSS
.my-box {
border-left-width: 5px;
}左辺のボーダーのスタイルを指定します。
CSS
.my-box {
border-left-style: dashed;
}左辺のボーダーの色を指定します。
CSS
.my-box {
border-left-color: #ff0000;
}個別プロパティを組み合わせるときは、次のように書きます。
CSS
.my-box {
border-left-width: 2px;
border-left-style: solid;
border-left-color: green;
}またはショートハンドを使うと以下のように1行でまとめることもできます。
CSS
.my-box {
border-left: 2px solid green;
}個別プロパティは指定しないものがあると、初期値が適用される、もしくはボーダーが表示されない原因にもなるので注意してください。特に border-left-style が none の状態では、幅や色を指定しても線が見えません。
ブログやホームページのデザインで、コンテンツの左側に装飾的な線を引きたい場合に便利です。
HTML
<div class="sidebar">
<h2>サイドバー</h2>
<p>ここにメニューやプロフィール情報などを配置します。</p>
</div>CSS
.sidebar {
width: 200px;
padding-left: 0.5em; /* ボーダーが被らないように余白をとる */
border-left: 4px solid #666; /* 左側に太めの線を強調 */
}こうすることで、サイドバーの左側に濃い線が入り、デザイン上のアクセントになります。
通知やメッセージを表示する際に、強調する目的で左辺に色付きの線を入れることがよくあります。
HTML
<div class="info-box">
<strong>お知らせ</strong> : こちらのページはメンテナンス中です。
</div>CSS
.info-box {
padding: 10px 15px;
margin: 10px 0;
border-left: 5px solid #007BFF; /* ブルー系の強調線 */
background-color: #f0f8ff; /* うっすら青みがかった背景で視認性を上げる */
color: #333; /* 文字は十分にコントラストをつける */
}このようにボーダーと背景色を合わせて見やすいデザインにすることで、ユーザーの目をひきやすい情報ボックスを作ることができます。
borderは、要素の4辺すべてのボーダーを一括設定するショートハンドプロパティです。
CSS
.element {
border: 2px solid red; /* 4辺全てに2pxの赤い実線を設定 */
}これに対して、border-left は左側のボーダーだけを設定します。特定の辺だけスタイルを変えたい場合は、border-left (または border-top, border-right, border-bottom) を使います。
例として、上と左だけ太い線で、右と下は実線だが細めにするといったケースがあるとします。
CSS
.element {
border: 1px solid #000; /* 全辺に1px実線を適用 */
border-left: 5px solid #f00; /* 左辺だけ幅5px・赤色の線に上書き */
border-top: 5px solid #f00; /* 上辺も幅5px・赤色の線に上書き */
}このように基本設定を border で行ったあと、特定の辺だけ border-left などを使って上書きできるのがメリットです。
はい。border-left-width や border-left-color を設定していても、border-left-style が none（または未設定の場合は初期値が none）の場合、線は表示されません。少なくとも border-left-style に何らかのラインスタイルを指定する必要があります。
border-left で太さとスタイルだけを指定し、色を指定しなかった場合、ほとんどのブラウザでは要素の color プロパティがそのままボーダーの色に継承されます。ただし、厳密には「継承」ではなく「初期値としてカレントカラー（currentColor）が適用される」という考え方です。
例 : border-left: 2px solid; と指定すると、通常は文字色と同じボーダー色になります。
ボーダーを太くすると、その分だけ要素の全体的な幅が変わる場合があります。特に要素の幅を固定している場合は、予期せず崩れが生じることもあるため、以下の点に注意してください。
HTML
<div class="box1">box1</div>
<div class="box2">box2</div>CSS
.box1 {
box-sizing: content-box; /* 初期値 */
width: 200px;
height: 50px;
border-left: 10px solid #000; /* ボーダーの分だけ外側にはみ出る */
margin: 1ex;
background-color: palegreen;
}
.box2 {
box-sizing: border-box;
width: 200px;
height: 50px;
border-left: 10px solid #000; /* 幅200pxの範囲内でボーダー含む */
margin: 1ex;
background-color: palegreen;
}下記は、左側のボーダーだけ強調したカードスタイルの例です。レスポンシブデザインなどではより複雑な指定を加えることが多いですが、基本的な使い方の参考としてご覧ください。
お知らせ
1月中旬よりシステムメンテナンスを実施するため、
一部機能がご利用いただけない場合がございます。
HTML
<div class="card">
<h3>お知らせ</h3>
<p>
1月中旬よりシステムメンテナンスを実施するため、<br>
一部機能がご利用いただけない場合がございます。
</p>
</div>CSS
.card {
box-sizing: border-box; /* ボックスのサイズが変わらないように設定 */
width: 300px; /* カードの幅を固定 */
margin: 20px auto; /* 中央揃え */
padding: 15px;
background-color: #fff;
border-left: 8px solid #3498db; /* 青色の太めボーダー */
border-top: 1px solid #ccc; /* ついでに上の境界線を薄めに設定 */
border-right: 1px solid #ccc; /* 右・下は別指定も可能 */
border-bottom: 1px solid #ccc;
border-radius: 4px; /* 角丸をつける例 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけて浮き上がり感を演出 */
}
.card h3 {
margin-top: 0;
font-size: 1.2em;
color: #333;
}
.card p {
color: #666;
line-height: 1.5;
}この例では、コンテンツ本体を白背景にして、左側だけ8px solid #3498dbという太めの実線を設定し、**「左側だけ強調されたカード」**を表現しています。四隅を角丸（border-radius）にして、さらに薄いシャドウ（box-shadow）を加えることで、情報カードやお知らせボックスのような見た目を簡単に作れます。
border-leftの幅や色をアニメーションで変化させると、ユーザーの目を引くマイクロインタラクションが作れます。
お知らせ
1月中旬よりシステムメンテナンスを実施するため、
一部機能がご利用いただけない場合がございます。
CSS
.animate-border {
transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
}
.animate-border:hover {
border-left-width: 10px;
border-left-color: #e74c3c;
}マウスホバー時にボーダーが太くなり、色が変わる演出が可能。
左側の装飾を擬似要素（:beforeや:after）で作る方法もありますが、CSSプロパティが増えて複雑になるため、単純に線を引く目的なら border-left を直接指定したほうが簡潔です。擬似要素を使うケースは、斜め線やグラデーションボーダーなど、単純なボーダーでは実現しにくいデザインを作りたいときにおすすめです。
印刷媒体用（print）CSSなどでボーダーを印刷したくない場合は、メディアクエリを使用して border-left をオフにするという手法もあります。
CSS
@media print {
.no-print-border {
border-left: none !important;
}
}border-leftプロパティは、要素の左側だけにボーダーを設定できる強力なCSSプロパティです。
この解説が、初心者から中級者の方にとっても「なぜ、どのように」使えばよいのかを深く理解する助けになれば幸いです。より洗練されたUIのために、ぜひborder-leftを使ったデザインを試してみてください。