CSS background-clip Property

CSS background-clip

The background-clip property in CSS specifies how far the background extends within an element. It determines whether the background image or color extends to the border, padding, or content area of an element.

Syntax of background-clip

</>

Copy

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

Values

Value	Description
`border-box`	The background extends to the border edge (default value).
`padding-box`	The background extends to the edge of the padding, excluding the border.
`content-box`	The background extends to the edge of the content area only.
`initial`	Sets the property to its default value (`border-box`).
`inherit`	Inherits the value from its parent element.

Default Value

border-box

Examples for background-clip

Using the CSS background-clip Property

The following examples demonstrate how to use the background-clip property to control the background area.

</>

Copy

/* Background extends to the border */
.element {
  background: lightblue;
  border: 10px solid black;
  background-clip: border-box;
}

/* Background extends to the padding area */
.element {
  background: lightgreen;
  border: 10px solid black;
  background-clip: padding-box;
}

/* Background extends to the content area */
.element {
  background: lightcoral;
  border: 10px solid black;
  background-clip: content-box;
}

Example for Padding-Box Background

Below is an example demonstrating background-clip: padding-box, where the background extends to the padding edge but not into the border:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  #mydiv {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 20px dotted green;
    background: lightgreen;
    background-clip: padding-box;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
  }
</style>
</head>
<body>

<div id="mydiv">Background only in the padding area</div>

</body>
</html>

Example for Content-Box Background

background-clip: content-box

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  #mydiv {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 20px dotted green;
    background: lightgreen;
    background-clip: content-box;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
  }
</style>
</head>
<body>

<div id="mydiv">Background only in the padding area</div>

</body>
</html>

Example for Border-Box Background

background-clip: border-box

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  #mydiv {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 20px dotted green;
    background: lightgreen;
    background-clip: border-box;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
  }
</style>
</head>
<body>

<div id="mydiv">Background only in the padding area</div>

</body>
</html>

Browser Support

The background-clip property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	4.0
Edge	9.0
Firefox	4.0
Safari	3.0
Opera	10.5

TutorialKart

CSS background-clip Property