In this section, we will learn what the background-clip property is and how to use it in CSS.

Click here to run the example of background-clip property.

CSS background-clip Property Definition and Usage

Sometimes we want to limit the edges of an image that is set for the background of an element to border or pad or content of that element.

CSS provided a property named `background-clip` that is used for this purpose.

CSS background-clip Property Syntax

background-clip: border-box|padding-box|content-box|initial|inherit;

CSS background-clip Property Value

The values for `background-clip` property are:

• border-box: Using this value, the image will be clipped right at the border edge of the target element.
• padding-box: using this value, the image will be clipped right at the pad edge of the target element.
• content-box: using this value, the image will be clipped right at the content edge of the target element.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: background-clip property in CSS

See the Pen background-clip property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.