CSS: inset box shadow

The CSS3 box-shadow property accepts an optional first value that specifies whether the box shadow must be rendered as an outer shadow or as an inner shadow. This parameter is called inset and has a simple Boolean value. If specified, the shadow will appear within the box edges, whereas the default behavior is to place the shadow outside the box edges. For example, the following CSS rule creates a normal box shadow:

#test {
 width: 150px;
 height: 150px;
 background: #ffc;
 border: 1px solid #999;
 border-radius: 10px;
 box-shadow: 5px 5px 5px #ccc;
}

As you can see, the shadow lies outside the box edges. Let's try to use the inset keyword:

#test {
 width: 150px;
 height: 150px;
 background: #ffc;
 border: 1px solid #999;
 border-radius: 10px;
 box-shadow: inset 5px 5px 5px #ccc;
}

Now the box shadow appears on the opposite side of the box as an internal shadow. As for other CSS3 properties that make use of offsets, we can adjust such values to get the effect we want.