
The CSS background-clip property specifies how far the background (colour/ or image) should extend within an element.
Demo:
Syntax:
background-clip: border-box|padding-box|content-box;
border-box (default) – the background extends behind the border.
padding-box – the background extends to the inside edge of the border.
content-box – the background extends to the edge of the content box.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#example-1, #example-2, #example-3 {
border: 5px dashed black;
padding: 20px;
background-color: #fed9b7;
}
#example-1 {
background-clip: border-box;
}
#example-2 {
background-clip: padding-box;
}
#example-3 {
background-clip: content-box;
}
</style>
</head>
<body>
<p>background-clip: border-box;</p>
<div id="example-1">
<p>The background extends behind the border.</p>
</div>
<p>background-clip: padding-box;</p>
<div id="example-2">
<p>The background extends to the inside edge of the border.</p>
</div>
<p>background-clip: content-box;</p>
<div id="example-3">
<p>The background extends to the edge of the content box.</p>
</div>
</body>
</html>
Output:
background-clip: border-box;
The background extends behind the border.
background-clip: padding-box;
The background extends to the inside edge of the border.
background-clip: content-box;
The background extends to the edge of the content box.
Enjoy coding!
Read also:
CSS background-position Property