Skip to content
Related Articles

Related Articles

Improve Article

CSS | background-clip Property

  • Difficulty Level : Hard
  • Last Updated : 01 Sep, 2021

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|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 uoto 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 Browser: The browser supported by background-clip property are listed below:

      • 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 :