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

投稿日: / 更新日:

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

サンプルコード

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

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

デモ

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

値の指定

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

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

ブラウザのサポート

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

  • Chrome

    -

    時期不明

  • Firefox

    -

    時期不明

  • Safari

    -

    時期不明

  • Ie

    -

    時期不明

  • Edge

    -

    時期不明

  • Opera

    -

    時期不明

  • Safari(iOS)

    -

    時期不明

  • Ie Mobile

    -

    時期不明

  • Chrome

    -

    時期不明

  • Android

    -

    時期不明

  • FF Mobile

    -

    時期不明

  • Opera Mobile

    -

    時期不明