background-clip | CSS-Tricks

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.

More Resources

Browser Support

All clear!

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.