CSS Background Clip Example

<!Doctype HTML>
<html>
<head>
<title>The Background Clip</title>
<style>
.clip1 {
  border: 20px dotted black;
  padding: 20px;
  background: lightblue;
  background-clip: border-box;  
  margin: 30px;
}
.clip2 {
  border: 20px dotted black;
  padding: 20px;
  background: lightblue;
  background-clip: padding-box;
  margin: 30px;
}
.clip3 {
  border: 20px dotted black;
  padding: 20px;
  background: lightblue;
  background-clip: content-box;
  margin: 30px;
}
</style>
</head>
<body>
	<h2>Background Clip Property</h2>
	This property defines how far the background should reach around the element. You can say the range of background. See the below example.
	<div class="clip1">
	border-box: defines the background to the outer edge of the border.
	</div>
	<div class="clip2">
	padding-box: defines the background to the inner edge of the border.
	</div>
	<div class="clip3">
	content-box: defines the background limited to the content.
	</div>
</body>
</html>

 
<!Doctype HTML>
<html>
<head>
<title>The Background Clip</title>
<style>
.clip1 {
  border: 20px dotted black;
  padding: 20px;
  background: lightblue;
  background-clip: border-box;  
  margin: 30px;
}
.clip2 {
  border: 20px dotted black;
  padding: 20px;
  background: lightblue;
  background-clip: padding-box;
  margin: 30px;
}
.clip3 {
  border: 20px dotted black;
  padding: 20px;
  background: lightblue;
  background-clip: content-box;
  margin: 30px;
}
</style>
</head>
<body>
    <h2>Background Clip Property</h2>
    This property defines how far the background should reach around the element. You can say the range of background. See the below example.
    <div class="clip1">
    border-box: defines the background to the outer edge of the border.
    </div>
    <div class="clip2">
    padding-box: defines the background to the inner edge of the border.
    </div>
    <div class="clip3">
    content-box: defines the background limited to the content.
    </div>
</body>
</html>                 