Its initial value is border-box, which means that backgrounds are clipped at the outer edge of the elementâ€™s border box. If we want our background to not extend underneath the border, all we have to do is to give it the value padding-box, which tells the browser to clip the background at the padding edge

we need to remember the Pythagorean theorem we learned at school about calculating the lengths of the sides of right triangles. The theorem states that the hypotenuse (the longest, diagonal side of the triangle) is equal to a2 + b2 where a and b are the lengths of its legs.