background-clip

background-clip lets you control how far a background image or color extends beyond an element’s padding or content.

.frame {
  background-clip: padding-box;
}

Values

• border-box is the default value. This allows the background to extend all the way to the outside edge of the element’s border.
• padding-box clips the background at the outside edge of the element’s padding and does not let it extend into the border.
• content-boxclips the background at the edge of the content box.
• inherit applies the background-clip setting of the parent to the selected element.

Demos

background-clip is best explained in action, so we’ve put together two demos to show how it works.

In the first demo, each div has one paragraph inside it. The paragraph is the div’s content. Each div has a yellow background and a 5 pixel, semi-transparent light blue border.

See the Pen background-clip by CSS-Tricks (@css-tricks) on CodePen.

By default, or with background-clip: border-box set, the yellow background extends all the way to the outside edge of the border. Notice how the border looks like it’s green because of the yellow background beneath it.

When the background-clip is changed to padding-box, the background color stops where the element’s padding ends. Notice that the border is blue because the background isn’t allowed to bleed into the border.

With background-clip: content-box, the background color only applies itself to the div’s content, in this case the single paragraph element. The div’s padding and border don’t have a background color. But, there’s one little detail worth mentioning: the color does extend into the content’s margin. Check out the differences between the first and second examples with content-box.

In the first content-box example, the browser’s default margins are applied to the paragraph, and the background clips after the margin. In the second example, the margin is set to 0 in the CSS, and the background is clipped at the edge of the text.

This next interactive shows background-clip with a background image. The content in this demo is a smaller empty div.

See the Pen background-clip interactive example by Timothy Miller (@tjacobdesign) on CodePen.

This demo also applies background-size: cover and background-repeat: no-repeat in addition to background-clip to control the background image, which would otherwise repeat until clipping.

Text

There is a vendor-prefixed version of this that works for clipping a background to text. In order to see that work, the text will also need to be transparent. Fortunately, there is another vendor-prefixed text color property that can effectively override color, making it safe to use as it can have a fallback:

.background-clip-text {
  
  /* if we can clip, do it */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  /* what will show through the text
      ~ or ~
     what will be the background of that element */
  background: whatever;

  /* fallback text color
      ~ or ~
     the actual color of text, so it better work on the background */
  color: red;
 
}

Firefox, Chrome, and Safari support this.

See the Pen
Lit text by Chris Coyier (@chriscoyier)
on CodePen.

Related

• background-attachment
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

More Resources

• background-clip in the CSS3 spec
• background-clip at MDN
• The CSS Box Model

Browser Support

All clear!

Chrome	Safari	Firefox	Opera	IE	Android	iOS
1+	3+	4+	10.5+	9+	4.1+	Works