CSS background-clip Property

February 10, 2021 12:37 pm IST

You are Here:

CSS background-clip Property

CSS background-clip property specifies how far the background should extend within an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ box-sizing: border-box; height: 280px; width: 280px; background: url("/husky.jpg") no-repeat; border: 10px double #8c8c8c; background-clip: border-box; padding: 10px; } #point{ background-clip: border-box; } #point1{ background-clip: padding-box; } #point2{ background-clip: content-box; } </style> </head> <body> <h1>CSS background-clip Property</h1> <h2>background-clip: border-box</h2> <div id="point"></div> <h2>background-clip: padding-box</h2> <div id="point1"></div> <h2>background-clip: content-box</h2> <div id="point2"></div> </body> </html>

Run

Syntax

Using CSS

element{ background-clip: border-box; }

Using Javascript

object.style.backgroundClip="border-box";

Animatable

No, background-clip property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS background-clip property is border-box.

Property Value

The following table provides a list of values for CSS background-clip property.

Value	Explanation
border-box	Specifies the background extends behind the border.
padding-box	Specifies the background extends to the inside edge of the border.
content-box	Specifies the background extends to the edge of the content box.

Using JavaScript

In the following example, we will demonstrate how to change the CSS background-clip property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ box-sizing: border-box; height: 280px; width: 280px; background: url("/husky.jpg") no-repeat; border: 10px double #8c8c8c; background-clip: border-box; padding: 10px; } </style> </head> <body> <h1>CSS background-clip Property</h1> <div id="point"> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("point"); function myFunction(){ x.style.backgroundClip = "padding-box"; } </script> </body> </html>

Run