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.

  • 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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :