CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets border-width property.

border-width

　border-widthプロパティは、上下左右のボーダーの太さをまとめて指定する際に使用します。上下左右を異なった太さにしたい場合には、半角スペースで区切って4つまでの値を指定できます。

値を1つ指定した場合

[上下左右]がその太さになります。

値を2つ指定した場合

記述した順に[上下][左右]の太さになります。

値を3つ指定した場合

記述した順に[上][左右][下]の太さになります。

値を4つ指定した場合

記述した順に[上][右][下][左]の太さになります。

　尚、ボーダーは太さや色だけを指定しても表示されないので注意してください。これは、border-styleプロパティの初期値が none となっているためです。ボーダーを表示させるには、太さや色だけでなく種類も同時に指定してやる必要があります。

　それぞれの辺は個別に、border-top-width, border-right-width, border-bottom-width, border-left-width や、書字方向による指定を利用して border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width で設定することができます。

書式

border-width: 値（複数可）

適用対象

すべての要素

初期値

各プロパティの初期値

値の継承

しない

指定できる値

数値で指定

数値に px や em や ex などの単位をつけて指定します。px とは１ピクセルを１とする単位で、実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。また、em とはフォントの高さを１とする単位で、ex とは小文字の「 x 」（エックス）の高さを１とする単位です。なお、マイナスの値を指定することはできません。

1px

1em

1ex

キーワードで指定

thin（細い）、medium（普通）、thick（太い）のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。

thin

medium

thick

使用例

値を 1個指定した場合

p {
	margin: 1.5em;
	padding: 1.5em;
	border: solid #dd2200;
}
.c1 {
	border-width: 10px;
}

<p class="c1">この段落の border-width には、値を 1個指定しています。</p>

値を 2個指定した場合

p {
	margin: 1.5em;
	padding: 1.5em;
	border: solid #dd2200;
}
.c2 {
	border-width: 1px 10px;
}

<p class="c2">この段落の border-width には、値を 2個指定しています。</p>

値を 3個指定した場合

p {
	margin: 1.5em;
	padding: 1.5em;
	border: solid #dd2200;
}
.c3 {
	border-width: 1px 10px 20px;
}

<p class="c3">この段落の border-width には、値を 3個指定しています。</p>

値を 4個指定した場合

p {
	margin: 1.5em;
	padding: 1.5em;
	border: solid #dd2200;
}
.c4 {
	border-width: 1px 10px 20px 30px;
}

<p class="c4">この段落の border-width には、値を 4個指定しています。</p>