Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

border-width

境界線の幅に関する項目をまとめて指定できます。

指定する値の個数で上下左右をそれぞれ異なる幅にすることができます。値の区切りは半角スペースを使用します。

値が1つの場合、上下左右の境界線に同じ値が適用されます。
値が2つの場合、1つ目は上下の、2つ目は左右の境界線に値が適用されます。
値が3つの場合、1つ目は上、2つ目は左右、3つ目は下の境界線に適用されます。
値が4つの場合、それぞれ上、右、下、左（上から時計回り）の境界線に適用されます。

サンプルコード

/* 『上下左右』を指定しています。 */
div.test { border-width: medium;}

/* 『上下』『左右』を指定しています。 */
div.test1 { border-width: medium 5px;}

/* 『上』『左右』『下』を指定しています。 */
div.test2 { border-width: medium 5px 8px;}

/* 『上』『下』『左』『右』を指定しています。 */
div.test3 { border-width: medium 5px 8px 10px;}

指定可能な値一覧

値	概要
数値	境界線の太さを『px』などで指定できます。
thin	『thin』(細い)というキーワードで指定します。一般的なブラウザでは1pxで表示されますがブラウザによって多少の差があります。
medium	『medium』(中間)というキーワードで指定します。一般的なブラウザでは3pxで表示されますがブラウザによって多少の差があります。『border-width』に関する値が指定されていない場合はこれが初期値となります。
thick	『thick』(厚い)というキーワードで指定します。一般的なブラウザでは5pxで表示されますがブラウザによって多少の差があります。

ブラウザでの表示結果

※ 以下のサンプルの『border-style』プロパティは『solid』を指定しています。

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ