CssHow-ToBeginner · 3 min read

How to Use background-clip in CSS: Syntax and Examples

The background-clip property in CSS controls how far the background extends within an element. You can set it to border-box, padding-box, or content-box to clip the background to the border, padding, or content area respectively.

📐

Syntax

The background-clip property accepts these main values:

border-box: Background extends to the outer edge of the border.
padding-box: Background stops at the edge of the padding, not under the border.
content-box: Background is visible only behind the content, excluding padding and border.

css

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

💻

Example

This example shows a box with a background color clipped differently using background-clip. You will see how the background stops at the border, padding, or content area.

css

div {
  width: 200px;
  height: 100px;
  border: 10px solid black;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

#borderBox {
  background-color: teal;
  background-clip: border-box;
}

#paddingBox {
  background-color: teal;
  background-clip: padding-box;
}

#contentBox {
  background-color: teal;
  background-clip: content-box;
}

Output

<div id="borderBox">background-clip: border-box</div> <div id="paddingBox">background-clip: padding-box</div> <div id="contentBox">background-clip: content-box</div>

⚠️

Common Pitfalls

One common mistake is expecting background-clip to affect the border color or border image. It only controls the background painting area, not the border itself.

Also, if you use transparent backgrounds or no background, the effect might not be visible.

css

/* Wrong: expecting border color to change */
div {
  border: 10px solid teal;
  background-color: red;
  background-clip: content-box;
}

/* Right: background color clipped, border color stays separate */
div {
  border: 10px solid black;
  background-color: red;
  background-clip: content-box;
}

📊

Quick Reference

Remember these points when using background-clip:

border-box: Background covers border area.
padding-box: Background covers padding and content, excludes border.
content-box: Background covers only content area.
Works with background colors and images.
Does not affect border color or border images.

✅

Key Takeaways

Use background-clip to control where the background is visible inside an element.

border-box includes the border area, padding-box excludes the border, and content-box shows background only behind content.

Background-clip does not change border color or border images.

It works with both background colors and background images.

If you don't see changes, check if the background or border is visible and not transparent.