border-leftプロパティ

TOPページに戻る > CSS

border-leftプロパティ

HTML要素の左の枠線のスタイル（枠線の種類）、枠線の太さ、枠線の色をまとめて指定できます
値は、border-left-style、border-left-width、border-left-colorの3つの値を使います
値を書く順序は、自由です
2つまで値は省略できます
値を省略した場合、それぞれの値は初期値になります

使い方（書式）

セレクタ { border-left: 値; }                                    

border-leftプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
border-left-styleの値	枠線の種類を指定
border-left-widthの値	枠線の太さを指定
border-left-colorの値	枠線の色を指定

プロパティ	値を省略した場合の初期値
border-left-style	none
border-left-width	medium
border-left-color	文字色に指定されている色

実際の指定方法

.hoge {
border-left: solid 1px #FC0;  /* 要素の左の枠線を実線、1px、色は#FC0で表示 */
 }

.hoge2 {
 border-left: solid 1px;      /* 要素の左の枠線を実線、1pxで表示、色は文字色*/
 }

.hoge3 {
 border-left: solid #FC0;     /* 要素の左の枠線を実線、色は#FC0で表示、太さは初期値 */
 }

.hoge4 {
 border-left: solid;          /* 要素の左の枠線を実線で表示、太さは初期値、色は文字色 */
 }

html部分

<p class="hoge">border-left: solid 1px #FC0;</p>

<p class="hoge2">border-left: solid 1px;</p>

<p class="hoge3">border-left: solid #FC0;</p>

<p class="hoge4">border-left: solid;</p>

実際の表示

 border-left: solid 1px #FC0;

 border-left: solid 1px;

 border-left: solid #FC0;

 border-left: solid;