CSS background-clip property

The background-clip property extends the background inside the element.

The clipping can extend to the content-box, padding-box, or border-box.

Example

#

A background with background-clip set to padding-box.
The border is visible, but padding and content are covered by the background.

<style>
  .clip {
    height: 250px;
    padding: 25px;
    border: 10px solid moccasin;
    background-image: url("/img/css/sunflowers.jpg");
    background-clip: padding-box;
  }
</style>

<div class="clip"></div>

Syntax

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

Values

#

Value Description
content-box Extends background to the content edge.
padding-box Extends background to include padding.
border-box Default. Extends background behind the border.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-clip values.

<style>
  .clip-example {
    height: 250px;
    border: 25px solid rgba(255, 228, 181, .5);
    padding: 25px;
    background-image: url("/img/css/sunflowers.jpg");
    background-clip: content-box;
  }
</style>

<div class="clip-example"></div>

Browser support

This table shows when background-clip support started for each browser.

Chrome
4.0 Jan 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
10.5 Mar 2010
Safari
3.0 Jun 2007

You may also like

Guides