Open In App
Related Articles

HTML DOM Style backgroundClip Property

Improve Article
Save Article
Like Article

The DOM style backgroundClip Property is used to set or return 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|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.



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


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

Last Updated : 15 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials