Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style backgroundClip Property
  • Last Updated : 19 Apr, 2021

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: 
 

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

Output :
Before Clicking On Button: 
 

After Clicking On Button: 
 

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

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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :