CSS Background-clip: The background-clip property describes the background’s painting area. It limits an area where the image or color of the background appears by using any clipping box. Everything will be invisible or discarded, which is outside of the box.

It sets, if an element’s background spreads under the content-box, padding-box, and border-box.

Syntax:

Property Values

The possible values are discussed below:

border-box

It is used as a default value. The border-box specifies that the color and image of the background will be designed within a border-box. It also sets the color of the background, which spreads on the entire distribution.

Example:

Output:

CSS Background-clip

padding-box

It is used to address the background inside the border. The color and image of the background are designed within a padding-box.

Example:

Output:

CSS Background-clip

content-box

The content-box value is used to set the color of the background only up to any content. In this, the backgrounds are drawn within a content-box. The color and image of the background will be designed within a content-box.

Example:

Output:

CSS Background-clip

Pin It on Pinterest

Share This