Border-box and padding-box

Question

#first {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: padding-box;
}
#second {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: border-box;
}

What is the basic difference between border-box and padding-box?

Answer 1

See here https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Answer 2

Please review:

https://www.sololearn.com/learn/CSS/2245/?ref=app

Be sure to play around with the Try It Yourself feature.

Might also be helpful to make the border thicker so you can see better.