background-clip

Definition

The background-clip property in CSS determines the area within which the background of an element will be painted. By default, the background extends to the outer edge of the element's border. However, you can use background-clip to specify a different area for the background to be painted within, such as the content box, padding box, or border box of the element.

Examples

Clipping the background to the border box:

.border-box {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 10px solid blue;
  background-clip: border-box;
}

Clipping the background to the padding box:

.padding-box {
  width: 200px;
  height: 200px;
  background-color: red;
  padding: 10px;
  border: 10px solid blue;
  background-clip: padding-box;
}

Clipping the background to the content box:

.content-box {
  width: 200px;
  height: 200px;
  background-color: red;
  padding: 10px;
  border: 10px solid blue;
  background-clip: content-box;
}

Clipping the background to the text:

.text {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 10px solid blue;
  background-clip: text;
}

Values

Best Practices

• Use background-clip to specify the area within which the background of an element should be painted.
• The default value for background-clip is border-box, which means that the background extends to the outer edge of the element's border.
• If you want the background to be painted within the padding or content box of the element, you can use the padding-box or content-box values for background-clip.
• The text value for background-clip is not widely supported, so it may not work as expected in all browsers.
• You can use background-clip in combination with other background properties, such as background-color, background-image, and background-position, to create more complex and customized backgrounds.

Browser Compatibility

However, the text value for background-clip is not widely supported and may not work as expected in all browsers.