CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 263

Figure 6-16. The placement meaning of the three values available values for the background-
clip and background-origin properties.

To demonstrate these values, we can create two boxes, which we'll apply a back-
ground to shortly:
<div class="box"></div>
<div class="box no-clip"></div>
We'll style both boxes so they have a width, height, padding, margin and a semi-trans-
parent border (the color syntax for the transparent border may look foreign to you; this
will be covered in the "Color" section later). One will be clipped to the content area,
while the other will be clipped to the border area:
.box {

width:200px; /*

set the width to 200 pixels */
height:200px; /*

set the height to 200 pixels */
padding:20px; /*

set the padding to 20 pixels */
margin:10px; /*

set the margin to 10 pixels */
border:10px solid hsla(0 , 0% , 0% , 0.5 );

/*set

a semi-transparent black border */