CSS background-clip Property

The CSS background-clip property specifies how far the background (colour/ or image) should extend within an element.

Demo:

Syntax:

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

border-box (default) – the background extends behind the border.

padding-box – the background extends to the inside edge of the border.

content-box – the background extends to the edge of the content box.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
    
#example-1, #example-2, #example-3 {
   border: 5px dashed black;
   padding: 20px;
   background-color: #fed9b7;
    }
#example-1 {
  background-clip: border-box;  
}

#example-2 { 
  background-clip: padding-box;
}

#example-3 {
  background-clip: content-box;
}
</style>
</head>
<body>

<p>background-clip: border-box;</p>
<div id="example-1">
  <p>The background extends behind the border.</p>
</div>

<p>background-clip: padding-box;</p>
<div id="example-2">
  <p>The background extends to the inside edge of the border.</p>
</div>

<p>background-clip: content-box;</p>
<div id="example-3">
  <p>The background extends to the edge of the content box.</p>
</div>

</body>
</html>

Output:

background-clip: border-box;

The background extends behind the border.

background-clip: padding-box;

The background extends to the inside edge of the border.

background-clip: content-box;

The background extends to the edge of the content box.

Enjoy coding!

Share this: