解説

背景は枠線の下にも描かれる？background-clipで色を塗る範囲を比べよう

半透明の枠線を使い、border-box・padding-box・content-boxを比較。枠や余白の寸法を保ったまま背景の描画範囲だけを変える作例。

この記事の道しるべ 4項目

背景色を付けた箱の枠線が、思った色より濃く見える。枠線を半透明にしているなら、その下にも背景が描かれているのかもしれないよ。

このページでは、箱のどこまで背景を塗るかをbackground-clipで切り替える。ブラウザだけで試せるよ。箱の内側の文章、その周りの余白padding、外周の枠線borderという三つを、順に見てみよう。

初期値はborder-box

.card {
  padding: 20px;
  border: 12px solid rgb(40 30 70 / 35%);
  background-color: #ffe75c;
  background-clip: border-box;
}

border-boxは、背景を枠線の外側の端まで描く指定だよ。背景は枠線の上へかぶさるのではなく、その下に描かれる。枠線が半透明なら、下の黄色も混ざって見える。

枠線が完全に不透明だと、その下の背景は見えない。違いを観察する作例で半透明の枠線にしているのは、そのためなんだ。

ページ内作例でpadding-boxへすると、黄色の背景が枠線の下からなくなる。content-boxへすると、文章の周囲のpadding部分からも黄色がなくなり、内側の領域へ塗る範囲が縮まるよ。

切り替えるのは背景の描画範囲だよ。paddingやborderの数値、要素の幅は同じまま。色がなくなった余白も、レイアウト上は残っているんだ。

同じborder-boxという名前でも、box-sizing:border-boxは幅や高さに枠・paddingを含めて数える指定。background-clip:border-boxは背景を描く範囲の指定だよ。

「背景を狭くしたい」のか、「指定した幅の中へ枠と余白を収めたい」のかを分けて選ぼう。作例ではbox-sizingをborder-boxに固定し、その状態でbackground-clipだけを切り替えている。

複数の背景画像や文字を使う別の値もあるけれど、ここでは三つの箱の範囲に絞っている。背景画像の表示サイズを変える指定でもないので、画像そのものの切り取りとは区別してね。

2026年10月29日にMDNを確認し、三つの値での表示と寸法、リセットをブラウザで検証した。box-sizingの幅の計算、背景色とopacityの違いも参考になるよ。

設定を切り替え、実際の表示と結果を比べよう。「最初から試す」で初期状態へ戻せるよ。

公開と変更の記録

日時は日本時間です。記載のある変更は、確認できた編集記録に基づきます。更新日の違いだけから変更内容を推測して載せることはありません。