Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundClip Property

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jul, 2022

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

  • It is used to return the backgroundClip property. 


  • It is used to set the backgroundClip property. = "border-box|padding-box|content-box|

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.



<!DOCTYPE html>
    <title>Border Box</title>
        #gfg {
            background-color: green;
            background-clip: border-box;
            text-align: center;
            border: 10px dashed black;
            color: white;
          DOM Style backgroundClip Property
        <div id="gfg">
                background-clip: border-box;
        <button onclick="myGeeks()">Submit</button>
            function myGeeks() {
                ).style.backgroundClip = "padding-box";

Output :
Before Clicking On Button: 

After Clicking On Button: 

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

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Firefox 4
  • Opera 10.5
  • Safari 14


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!