Skip to content
Related Articles

Related Articles

Improve Article

CSS | background-clip Property

  • Difficulty Level : Hard
  • Last Updated : 22 Feb, 2021

The background-clip property in CSS is used to define how to extend background (color or image) within an element.
 

Syntax:  

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

Property value:

  • border-box: The border-box property is used to set the background color spread over the whole division.
     

Syntax: 

background-clip: border-box;

Example: 



html




<!DOCTYPE html>
<html>
    <head>
        <title>Border Box</title>
        <style>
            .gfg {
                background-color: green;
                background-clip:border-box;
                text-align:center;
                border:10px dashed black;
            }
        </style>
    </head>
     
    <body>
        <div class = "gfg">
            <h2>
                GeeksforGeeks
            </h2>
             
<p>
                background-clip: border-box;
            </p>
 
        </div>
    </body>
</html>                           

Output: 
 

  • padding-box: The padding-box property is used to set the background inside the border.
     

Syntax: 

background-clip:padding-box;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>padding-box property</title>
        <style>
            .gfg {
                background-color: green;
                background-clip:padding-box;
                padding: 25px;
                border: 10px dashed black;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
     
        <div class = "gfg">
            <h2>
                GeeksforGeeks
            </h2>
             
<p>
                background-clip: padding-box;
            </p>
 
        </div>
    </body>
</html>                   

Output: 
 

  • content-box: The content-box property is used to set the background color upto the content only.
     

Syntax: 

background-clip:content-box;

Example: 



html




<!DOCTYPE html>
<html>
    <head>
        <title>content-box property</title>
        <style>
            .gfg {
                background-color: green;
                background-clip:content-box;
                padding: 15px;
                border: 10px dashed black;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
     
        <div class = "gfg">
            <h2>
                GeeksforGeeks
            </h2>
             
<p>
                background-clip: content-box;
            </p>
 
        </div>
    </body>
</html>                           

Output: 
 

  • initial: It is the default value. It is used to set the background color spread over the whole division. 
     

Syntax: 

background-clip:initial-box;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>Initial</title>
        <style>
            .gfg {
                background-color: green;
                background-clip:initial;
                padding: 15px;
                border: 10px dashed black;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
     
        <div class = "gfg">
            <h2>
                GeeksforGeeks
            </h2>
             
<p>
                background-clip: initial;
            </p>
 
        </div>
    </body>
</html>                   

 

Output: 
 

Supported Browsers:
 

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Opera 10.5
  • Safari 3.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :