1値4辺を同じ太さにする
長さを1つだけ書くと、上・右・下・左のすべてに適用されます。
border-width
要素の4辺にある境界線の太さをまとめて指定するプロパティ。上・右・下・左を個別に変え、値の数と適用先を比べます。
CSSのborder-widthとは？
境界線の上・右・下・左の太さをライブプレビューで変えながら、1〜4値の順番、キーワード、線が見える条件を初学者向けに解説します。
遊んでみよう
1〜4値を上から時計回りに配置
上右下左border-width
CSS
.element border-width: 6px;
値のパターン
border-widthの構成要素
2〜3値対向の辺で太さを共有する
2値は上下／左右、3値は上／左右／下の順です。左右は同じ太さを使います。
4値上から時計回りに指定する
4つの長さは上・右・下・左の順で、上辺から時計回りに対応します。
早見表
0以上の長さか、thin・medium・thickを使います。値の数で、どの辺へ太さを配るかが変わります。
01
4px4辺すべてを同じ太さにする1値02
2px 8px上下を2px、左右を8pxにする2値03
2px 8px 12px上・左右・下の順に配る3値04
2px 6px 10px 14px上・右・下・左の順に配る4値05
mediumブラウザーが決める中間の太さを使う初期値06
thin | thick細い線または太い線を使うキーワードよくある使い方
01
カードを細い線で囲む
border-styleとborder-colorを用意したカードへ、控えめな太さを4辺まとめて指定します。
.card { border-width: 1px; }02
下辺を太くして見出しを区切る
ほかの辺を0にして下辺だけを太くすると、見出しと続く内容の境界を強調できます。
.heading { border-width: 0 0 4px; }03
左辺を太くして補足を示す
左辺だけに十分な幅を持たせ、補足や引用の開始位置を形でも分かるようにします。
.note { border-width: 0 0 0 6px; }ポイント
太さがあっても、border-styleがnoneなら線は見えない。
border-widthの各辺の初期値はmediumで、0以上の長さかthin・medium・thickを指定できます。負の値は無効です。すべての要素と::first-letterに適用でき、子要素へは継承されません。対応するborder-styleがnoneまたはhiddenなら、実際に使われる太さは0になります。境界線を見せるにはsolidなどの線種とborder-colorも用意します。
関連するCSSも見てみよう。
border-width と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。