Related Articles

Related Articles

HTML | DOM Style backgroundClip Property
  • Last Updated : 29 Jul, 2019

The DOM style backgroundClip Property is used to set or returns the painting area of the background.

Syntax:

  • It is used to return the backgroundClip property.
  • object.style.backgroundClip 
  • It is used to set the backgroundClip property.
  • object.style.backgroundClip = "border-box|padding-box|content-box|
    initial|inherit" 

    Property Values:

    • border-box property: The border-box property is used to set the background color spread over the whole division.
    • padding-box property: The padding-box property is used to set the background inside the border.
    • content-box property: The content-box property is used to set the background color upto the content only.

    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;
                color: white;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>
              DOM Style backgroundClip Property
            </h1>
            <div id="gfg">
                <h2
                    GeeksforGeeks 
                </h2>
                <p>
                    background-clip: border-box;
                </p>
            </div>
            <br>
            <button onclick="myGeeks()">Submit</button>
            <script>
                function myGeeks() {
                    document.getElementById("gfg"
                    ).style.backgroundClip = "padding-box";
                }
            </script>
      </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output :



    Before Clicking On Button:

    After Clicking On Button:

    Supported Browsers: The browser supported by DOM backgroundClip Property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    full-stack-img




    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :