Skip to content
Related Articles

Related Articles

CSS | background-clip Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 01 Aug, 2022

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

Default Value:

  • border-box

Syntax:

background-clip: border-box|padding-box|content-box|text|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 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 9.0 and above
  • Firefox 4.0 and above
  • Opera 10.5 and above
  • Safari 14.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!