border-width - 枠線の幅をまとめて指定する

投稿日: / 更新日:

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

サンプルコード

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

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

デモ

上枠の幅を5px、右枠の幅を20px、下枠の幅を1px、左枠の幅を50pxに、まとめて指定した例です。

値の指定

基本的に、値には「上枠」「右枠」「下枠」「左枠」の順に、スペースで区切って4つの値を指定します。例えば、5px 20px 1px 50pxと指定すれば、上枠に5px、右枠に20px、下枠に1px、左枠に50pxが適用されます。上(12時)から、右回りになる時計と同じです。時計回りということを覚えておきましょう。

応用として、2つの値を指定すると1つ目の値が「上枠」と「下枠」、2つ目の値が「右枠」と「左枠」と、十字の形のように適用されます。縦に斬って、横に斬るイメージです。また、1つの値を指定すると、全ての枠に適用されます。

/* 基本は4つの値を指定する */
/* [1]上 → [2]右 → [3]下 → [4]左 */
#element {
	border-width: 5px 20px 1px 50px ;
}

/* 2つの値を指定すると「上下」「左右」に適用される */
/* [1]上下 → [2]左右 */
#element {
	border-width: 5px 20px ;
}

/* 1つの値を指定すると「上下左右」に適用される */
/* [1]上下左右 */
#element {
	border-width: 20px ;
}

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

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のborder-widthには、bodyに指定された値(10px 20px 30px 40px)が引き継がれる。ただし、親要素の枠線に実態がないと引き継がれない。例えば、親要素にborder-widthだけを指定しても、div要素にそのborder-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

    ●

    -

    時期不明