CSS background-clip

This CSS property specifies the painting area of the background. It limits the area in which the background color or image appears by applying a clipping box. Anything outside the box will be discarded and invisible.

It sets whether the background of an element extends under the border-box, padding-box, and content-box.

Syntax

Possible values

Let's understand the property values along with an example of each.

border-box

It is the default value. It means that the background image and color will be drawn inside the border-box. It sets the background color, which spreads over the entire division.

Example

<!DOCTYPE html> 
<html>  
    <head>    
        <style>  
            div {  
                background-color: yellow;  
                background-clip: border-box;  
                text-align: center; 
                border:5px dotted blue; 
            }  
	h1,h2{
	color: red;
	}
        </style>  
    </head> 
      
    <body>  
        <div>  
            <h1> 
              Welcome to the javaTpoint.com
            </h1>  
            <h2> 
                background-clip: border-box; 
            </h2> 
        </div>  
    </body>  
</html>

Test it Now

padding-box

It sets the background within the border, i.e., the background image and color are drawn inside the padding-box.

Example

<!DOCTYPE html> 
<html>  
    <head>   
        <style>  
            div {  
                background-color: yellow;  
                background-clip: padding-box;  
	   padding: 25px;
                text-align: center; 
                border:5px dashed blue; 
            }  
	h1,h2{
	color: red;
	}
        </style>  
    </head> 
      
    <body>  
        <div>  
            <h1> 
              Welcome to the javaTpoint.com
            </h1>  
            <h2> 
                background-clip: padding-box; 
            </h2> 
        </div>  
    </body>  
</html>

Test it Now

content-box

It sets the background-color up to the content only. The background is painted inside the content box, i.e., the background image and color will be drawn in the content box.

Example

<!DOCTYPE html> 
<html>  
    <head>   
        <style>  
            div {  
                background-color: yellow;  
                background-clip: content-box;  
	   padding: 15px;
                text-align: center; 
                border:5px dashed blue; 
            }  
	h1,h2{
	color: red;
	}
        </style>  
    </head> 
      
    <body>  
        <div>  
            <h1> 
              Welcome to the javaTpoint.com
            </h1>  
            <h2> 
                background-clip: content-box; 
            </h2> 
        </div>  
    </body>  
</html>

Test it Now

Next TopicCSS checkbox style

← prev next →