border-left-width - 左枠の幅を指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのborder-left-widthは、左枠の幅を指定するためのプロパティです。

サンプルコード

border-left-widthを指定した例です。このプロパティの指定を有効にするには、あらかじめ枠線を用意して下さい。

div {
	border: 20px solid #333 ;
	border-left-width: 50px ;
}

border-left-widthを指定した例です。左枠だけ、幅が50pxと太くなっているのを確認して下さい。CSSタブを編集して、どのように表示が変わるか試してみて下さい。

#element { border: 20px solid #333 ; border-left-width: 50px ; max-width: 50% ; padding: 20px 0 ; text-align: center ; margin: 20px auto 0 ; }

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`border-left-width`には、`body`に指定された値(`50px`)が引き継がれる。ただし、親要素の枠線に実態がないと機能しないようだ。例えば、親要素に`border-left-width`だけを設定して引き継ごうとしても、引き継がれない。
initial	プロパティの初期値が適用される。この場合、キーワードの`medium`が指定されたのと同じ扱いになる。
keyword	幅のサイズを示すキーワードで指定する。`medium`(中くらい)、`thin`(細い)、`thick`(厚い)の3種類がある。
length	`px`など、CSSで許可されている単位を利用してサイズを指定します。(単位の一覧)

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。