HTML DOM Style backgroundClip Property

Last Updated : 15 Jun, 2023

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