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;

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:
    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: The padding-box property is used to set the background inside the border.

  • Syntax:
    background-clip:padding-box;
  • 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: The content-box property is used to set the background color uoto the content only.

  • Syntax:
    background-clip:content-box;
  • 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: It is the default value. It is used to set the background color spread over the whole division.

  • Syntax:
    background-clip:initial-box;
  • 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: