CSS | background-clip Property

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

Syntax:

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

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                            

chevron_right


Output:



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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                            

chevron_right


Output:

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

Supported Browser: The browser supported by background-clip property are listed below:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.