Get your own website Result Size: 625 x 565
×
Change Orientation Save Code Change Theme, Dark/Light Go to Spaces
​x
 
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 15px;
  background: lightblue;
  background-clip: border-box;  
}
​
#example2 {
  border: 10px dotted black;
  padding: 15px;
  background: lightblue;
  background-clip: padding-box;
}
​
#example3 {
  border: 10px dotted black;
  padding: 15px;
  background: lightblue;
  background-clip: content-box;
}
</style>
</head>
<body>
​
<h1>The background-clip Property</h1>
​
<p>The background-clip property defines how far the background should extend within an element.</p>
​
<p>background-clip: border-box (this is default):</p>
<div id="example1">
  <p>The background extends behind the border.</p>
</div>
​
<p>background-clip: padding-box:</p>
<div id="example2">
  <p>The background extends to the inside edge of the border.</p>
</div>
​
<p>background-clip: content-box:</p>
<div id="example3">
  <p>The background extends to the edge of the content box.</p>
</div>