Background Clip

CSS background-clip Property

The CSS background-clip property defines how far the background (color, image, or gradient) should extend within an element.

This property can have one of the following values:

• border-box - The background extends behind the border. This is default
• 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

   #div1 {
  border: 5px dotted black;
  padding: 35px;

   background-image: url(paper.gif);
  background-clip: border-box;

   }

#div2 {

   border: 5px dotted black;
  padding: 35px;

   background-image: url(paper.gif);
  background-clip: padding-box;

   }

#div3 {

   border: 5px dotted black;
  padding: 35px;

   background-image: url(paper.gif);
  background-clip: content-box;

   }

Example

   #div1 {
  border: 5px dotted black;
  padding: 35px;

   background-color: lightblue;
  background-clip: border-box;

   }

#div2 {

   border: 5px dotted black;
  padding: 35px;

   background-color: lightblue;
  background-clip: padding-box;

   }

#div3 {

   border: 5px dotted black;
  padding: 35px;

   background-color: lightblue;
  background-clip: content-box;

   }

CSS Advanced Background Properties