border-widthプロパティ

TOPページに戻る > CSS

border-widthプロパティ

HTML要素の上下左右の枠線の太さをまとめて指定できます
値は、px、emなどの単位を使って指定。または、キーワードを使って指定します
キーワードの値は、thin(細い)、medium(標準)、thick(太い)の3つです。キーワードで指定した場合、閲覧するブラウザによって太さが変わります
枠線を表示するにはborder-styleプロパティで枠線の種類を指定してください。 border-styleの値が指定されていないと枠線は表示されません。border-styleの初期値がnone(枠線なし)になっているためです

使い方（書式）

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

border-widthプロパティ

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

プロパティの値	説明
単位	px、emなどの単位
thin	細い枠線
medium	標準の太さの枠線。これが初期値、標準にしては太い
thick	太い枠線

値の数	説明
値が1つ	「上下左右」の枠線の太さを一括で指定する
値が2つ	「上下」「左右」 1つ目が上下、2つ目が左右の枠線の太さを指定
値が3つ	「上」「左右」「下」 1つ目が上、2つ目が左右、3つ目が下の枠線の太さを指定
値が4つ	「上」「右」「下」「左」 1つ目が上、2つ目が右、3つ目が下、4つ目が左の枠線の太さを指定

実際の指定方法

p.hoge {
 border-width: 1px;             /* 要素の上下左右の枠線の太さを1pxに指定 */
 border-style: solid;           /* 要素の枠線を実線で表示 */
 }

p.hoge2 {
 border-width: 1px 2px;         /* 要素の上下が1px、左右の枠線を2pxに指定 */
 border-style: solid;           /* 要素の枠線を実線で表示 */
 }

p.hoge3 {
 border-width: 1px 2px 3px;     /* 要素の上が1px、左右が2px、下の枠線を3pxに指定 */
 border-style: solid;           /* 要素の枠線を実線で表示 */
 }

p.hoge4 {
 border-width: 1px 2px 3px 4px; /* 要素の上が1px、右が2px、下が3px、左の枠線を4pxに指定 */
 border-style: solid;           /* 要素の枠線を実線で表示 */
 }

html部分

<p class="hoge">border-width: 1px;</p>
<br>
<p class="hoge2">border-width: 1px 2px;</p>
<br>
<p class="hoge3">border-width: 1px 2px 3px;</p>
<br>
<p class="hoge4">border-width: 1px 2px 3px 4px;</p>

実際の表示

border-width: 1px;

border-width: 1px 2px;

border-width: 1px 2px 3px;

border-width: 1px 2px 3px 4px;