Table of Contents
CSS Background-clip property
The background-clip property set the how far the background (color or image) should extend within an element.
CSS Syntax→ background-clip: border-box|padding-box|content-box;
- Border-box : Default value. 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>
.example1 {
background-color: yellow;
background-clip: border-box;
border:10px dotted blue;
padding: 15px;
}
.example2 {
background-color: yellow;
background-clip: padding-box;
border:10px dotted blue;
padding: 15px;
}
.example3 {
background-color: yellow;
background-clip: content-box;
border:10px dotted blue;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Background-clip property
</h1>
<h2>background-clip: Border-box;
</h2>
<div class="example1">
<p>
Welcome to the Nielitbhu.com
</p>
</div>
<h2>
background-clip: Padding-box;
</h2>
<div class="example2">
<p>
Welcome to the Nielitbhu.com
</p>
</div>
<h2>
background-clip: Content-box;
</h2>
<div class="example3">
<p>
Welcome to the Nielitbhu.com
</p>
</div>
</body>
</html>