CSS3 background-clip Property

Here is the brief explanation on how to specify the painting area of the background in a HTML element in CSS3 using the CSS3 background-clip property.

Explanation

Property :

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


Where,
border-box - Default value. The background is clipped to the border box
padding-box - The background is clipped to the padding box
content-box - The background is clipped to the content box
initial - Sets this property to its default value. Read about initial
inherit - Inherits this property from its parent element

Usage:


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

Definition:

The background-clip property specifies the painting area of the background.

It takes the following values.
  • padding-box : Default value.
  • border-box : The background is clipped to the padding box.
  • content-box : The background is clipped to the content box.

Example 1:


<div style='border: 5px dashed red;
padding:30px;background: #868A08;
background-clip: content-box;
width:200px;height:70px;'>
This is an example for CSS3 background-clip property.</div>

Result:
This is an example for CSS3 background-clip property.


Example 2:


<div style='border: 5px dashed red;
padding:30px;background: #868A08;
background-clip: border-box;
width:200px;height:70px;'>
This is an example for CSS3 background-clip property.</div>

Result:
This is an example for CSS3 background-clip property.


Example 3:


<div style='border: 5px dashed red;
padding:30px;background: #868A08;
background-clip: padding-box;
width:200px;height:70px;'>
This is an example for CSS3 background-clip property.</div>

Result:
This is an example for CSS3 background-clip property.



Ask Questions

Ask Question