CSS paddingの部分の内側だけ色を変えるには？

Question

下記のようなCSSがあります
box-sizing:border-boxで内側にpaddingを入れています
paddingを入れた場合に、
入ってる部分はbackground:yellowを適用しないようにするにはどうしたらいいのでしょうか？

つまり黄色の部分が20px(padding分)縮まるような感じにしたいです

<div style="width:200px;height:200px;background:yellow;padding:20px;box-sizing:border-box">
</div>

Answer 1

ご解決のようですが、background-clip: content-boxがお手軽でいいと思いますよ。

background-clip - CSS: カスケーディングスタイルシート | MDN

Answer 2

paddingプロパティはwidth、heightで確保した領域の内側に余白を作り出す指定なので、その余白部分もbackground-colorの対象になってしまうので難しいです。

同等のことをしたい場合、

<div style="width:160px;height:160px;background:yellow;margin:20px"></div>

とするか、paddingの代わりにborderをベースの背景色で指定して

<div style="width:200px;height:200px;background:yellow;box-sizing:border-box;border:20px solid white"></div>

でしょうか。