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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

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