Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS background-clip property
The CSS background-clip property is used to define the painting area of the background. It controls how far the background extends within an element.
Syntax
selector {
background-clip: value;
}
Possible Values
| Value | Description |
|---|---|
border-box |
Background extends to the outer edge of the border (default) |
padding-box |
Background extends to the outer edge of the padding |
content-box |
Background extends only to the edge of the content area |
Example 1: Using padding-box
The following example demonstrates background-clip: padding-box where the background does not extend under the border −
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 15px;
background: orange;
background-clip: padding-box;
width: 300px;
}
</style>
</head>
<body>
<div id="demo">
<h3>Background Clip Example</h3>
<p>This background extends only to the padding area, not under the dashed border.</p>
</div>
</body>
</html>
An orange background with red dashed border where the orange background stops at the padding edge, creating a gap between the background and border.
Example 2: Comparing Different Values
This example shows all three background-clip values side by side −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 10px solid rgba(255, 0, 0, 0.3);
padding: 20px;
margin: 10px;
background: linear-gradient(45deg, blue, green);
width: 150px;
height: 80px;
display: inline-block;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
</style>
</head>
<body>
<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>
</body>
</html>
Three boxes with blue-green gradient backgrounds: first shows background under transparent border, second shows background stopping at padding edge, third shows background only in content area.
Conclusion
The background-clip property provides precise control over background painting areas. Use padding-box to prevent backgrounds from showing through transparent borders, or content-box for backgrounds limited to content areas only.
Updated on: 2026-03-15T11:46:14+05:30
194 Views
Advertisements