Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- border-left
border-left
左部の境界線に関する項目をまとめて指定できます。まとめて指定できるプロパティは『border-color』プロパティ、『border-style』プロパティ、『border-width』プロパティです。 指定の順番は順不同で問題ありません。
サンプルコード
div.test { border-left: dashed;}
div.test1 { border-left: dashed 2px;}
div.test2 { border-left: solid 2px #000;}
指定可能な値一覧(border-color)
| 値 | 概要 |
|---|---|
| transparent | 境界線を透明色に指定します。 |
| カラーコード、もしくはカラーネーム | 境界線を指定した色へ変更します。『border-color』に関する項目が指定されていない場合は『color』プロパティに指定されている色が初期値となります。 |
指定可能な値一覧(border-style)
| 値 | 概要 |
|---|---|
| none | 境界線描写をしません。太さも0となります。これが初期値です。 |
| solid | 1本の線で描写されます。 |
| dashed | 隙間が大きめの破線で境界線を描写します。 |
| dotted | 隙間が小さめの破線で境界線を描写します。 |
| double | 2本の線で描写されます。 |
| groove | 彫り込まれているような境界線で描写されます。『ridge』と逆の描写です。 |
| ridge | 彫り上がっているような境界線で描画されます。『groove』と逆の描写です。 |
| inset | 埋め込みされているような境界線で描写されます。『outset』と逆の描写です。 |
| outset | 浮き上がっているような境界線で描写されます。『inset』と逆の描写です。 |
指定可能な値一覧(border-width)
| 値 | 概要 |
|---|---|
| 数値 | 境界線の太さを『px』などで指定できます。 |
| thin | 『thin』(細い)というキーワードで指定します。一般的なブラウザでは1pxで表示されますがブラウザによって多少の差があります。 |
| medium | 『medium』(中間)というキーワードで指定します。一般的なブラウザでは3pxで表示されますがブラウザによって多少の差があります。『border-width』に関する値が指定されていない場合はこれが初期値となります。 |
| thick | 『thick』(厚い)というキーワードで指定します。一般的なブラウザでは5pxで表示されますがブラウザによって多少の差があります。 |
ブラウザでの表示結果
<div style="border-left: none; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: solid 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: dashed 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: dotted 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: double 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: groove 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: ridge 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: inset 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
<div style="border-left: outset 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
対応ブラウザ
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
|---|---|---|---|---|---|---|---|---|---|
| iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
|---|---|---|
概要
境界線に関するプロパティである『border-color』プロパティ、『border-style』プロパティ、『border-width』プロパティをまとめて指定できます。 指定の順番は順不同で問題ありません。
『border-left』プロパティを記述した場合、値として指定していない左部の境界線に関する項目は初期値としてリセットされます。『border-left』プロパティを記述した場合、前に書いてある左部の境界線に関する項目は全てリセットされるということになります。
<div style="border-width: 10px; border-style: dashed; border-left: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>
左部の境界線を何かしら表示したい場合、『border-style』プロパティに関する項目は必ず指定する必要があります。『border-style』プロパティの初期値は太さ0の『none』となっている為、何かの値を指定しない限り境界線の描写は行われません。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
