CSS allows you to crop the edges of a background image (or plain background) so that they do not extend to the outer edges of an element’s border, padding, or content box. The property used to specify whether or not this should be done is the background- clip property. It is a non- inherited property and takes one of a number of values.
In the example, the div{} rule says to make the border of the <div> elements 10px-thick dotted line and black; make the space between their content and their border 10px, and the background color lightpink. The div#one{}, div#two{}, and div#three{} rules say the background color must not extend to the outer edges of the <div> elements’ border-box, padding-box, and content-box, respectively.
The standard ones are listed in Table 15.6. Figure 15.29 shows how the values are used and Figure 15.30 the effects.
FIGURE 15.30 The result of Figure 15.29
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.