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;
}

Syntax

background-clip = <bg-clip>#  

<bg-clip> = [ content-box | padding-box | border-box ] | [ border-area || text ]

• Initial: border-box
• Applies to: all elements
• Inherited: no
• Percentages: n/a
• Computed value: a list of the specified keywords
• Canonical order: per grammar
• Animation type: repeatable list

Values

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: border-area;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: revert-layer;
background-clip: unset;

• border-box: 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-box: Clips the background at the edge of the content box.
• text: Clips the background to the foreground text, including any text decorations and emphasis marks. The text color itself has no effect on how the background is painted.
• border-area: Clips the background to the area painted by the border, taking the border’s width and style into account. Any transparency from the border color is ignored.

Using multiple values

Take a look at the syntax for background-clip:

background-clip = <bg-clip>#

The # means you can provide a comma-separated list of values when you’re working with multiple background layers. That’s what allows you to use a different clipping area for each background image.

.element {
  background-image: url(bg.png), url(bg-2.png);
  background-clip: content-box, border-box;
}

Here, the first background layer is clipped to the content-box, while the second layer is clipped to the padding-box.

Combining text and border-area

Demystifying another part of the syntax reveals another feature of this property.

background-clip = <bg-clip>#  

<bg-clip> = [ content-box | padding-box | border-box ] | [ border-area || text ]

The || in the second part means that border-area and text can be used together:

.element {
  background-clip: border-area text;
}

When both values are specified, the background is painted within the union of the border area and the text area. In other words, the background is visible wherever either of those two areas exists.

This is different from the first three values, which are mutually exclusive. You can’t combine border-box, padding-box, or content-box with text or border-area as part of the same <bg-clip> value.

However, you can combine the border-area text value with other background layers:

.element {
  background-image: url(texture.png), linear-gradient(...);
  background-clip: border-area text, padding-box;
}

Demo

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.

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.

This demo also applies background-size: cover and background-origin: border-box in addition to background-clip to control the background image.

background-clip doesn’t affect the root element

The root element has a different background painting area, so background-clip has no effect when specified on it.

For HTML documents, the browser also has special rules for the canvas background. If the root html element has no background image and a transparent background color, the background properties from the first body element are propagated to the canvas instead.

For that reason, if you’re setting the background of the page itself, it’s generally better to set it on body rather than relying on background-clip on html.

Opaque borders and text can hide the effect

The background is always painted behind the border. As a result, background-clip: border-box only has a visible effect when the border is partially transparent or contains transparent regions.

Similarly, background-clip: text has no visible effect when the text is fully opaque, because the text is painted over the background.

Browser support

The background-clip property is defined in the CSS Backgrounds Module Level 4 specification and is widely available across browsers. However, support for the newer text and border-area values is more limited.

Firefox does not currently support the border-area value. Its support for text is also incomplete in some situations. For example, it does not work with background-attachment: fixed, with multi-layer backgrounds that use other background-clip values, and in some other special cases.

Safari has not yet implemented support for combining text and border-area in the same background-clip value. If both values are specified together, the declaration falls back to the initial behavior. Implementation details can be found here.

Changelog

• July 22, 2026: Added the text and border-area values.
• July 22, 2026: Documented combining text and border-area in a single value.
• July 22, 2026: Added browser compatibility notes for text and border-area.

More information

Related properties