Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 369

Background origin and clipping
CSS2 has no control over what part of an element the background
applies to. Because CSS2 doesn't allow background sizing, most
authors haven't encountered this limitation; but CSS3 introduces two
new properties to give web authors fine-grained control: background-
origin and background-clip .
This section requires an understanding of the CSS
box model to get the most out of it. If you aren't
sure, please refer to the discussion in appendix C or
the diagrams in chapter 8 before proceeding.
The default for background-origin is
padding-box . This means the background
applies to the area containing the padding
but not to the area containing the border:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-origin: padding-box;
}
Remember, this example image is scaled to
fill its container and set to not repeat.
Setting the origin to border-box means the
background now extends out under the
border:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-origin: border-box;
}