<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Backgrounds and Borders: background-clip color backgrounds</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<link rel="match" href="background-clip-color-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#the-background-clip">
<style>
  #borderBoxHelper {
    margin: 10px;
    width: 30px;
    height: 30px;
    background-color: red;
  }
  #borderBox {
    border: 6px dashed green;
    padding: 6px;
    width: 6px;
    height: 6px;
    background-color: green;
    background-clip: border-box;
  }
  #paddingBoxHelper {
    width: 30px;
    height: 30px;
    background-color: red;
  }
  #paddingBox {
    border: 10px dashed white;
    padding: 10px;
    width: 10px;
    height: 10px;
    background-color: green;
    background-clip: padding-box;
  }
  #contentBoxHelper {
    width: 30px;
    height: 30px;
    background-color: red;
  }
  #contentBox {
    padding: 10px;
    width: 30px;
    height: 30px;
    background-color: green;
    background-clip: content-box;
  }
</style>
<p>There should be three green 30x30 px squares below.</p>
<div>border-box</div>
<div id="borderBoxHelper">
  <div id="borderBox"></div>
</div>
<div>padding-box</div>
<div class="paddingBoxHelper">
  <div id="paddingBox"></div>
</div>
<div>content-box</div>
<div class="contentgBoxHelper">
  <div id="contentBox"></div>
</div>