Recipe 3.1. Placing a Border Around an Image

Problem

You want to place a border around an image.

Solution

Use the border property on the img element (see Figure 3-1):

img {  width: 300px;  border: 6px double #666;   background: #fff;  padding: 6px; }

Figure 3-1. A border is placed around an image

Discussion

If you make an image a link, there's a possibility of creating a more complex presentation with the border property. Using the :hover pseudo-class, the style of the border can be changed when a user rolls over the image (see Figure 3-2):

img {  width: 30px;  border: 4px double #666;  background: #fff;  padding: 4px; } a:hover img {  border-style: solid;  background: #999; }

Figure 3-2. Combining background color with border styles creates an interesting rollover effect

While the border acts like a frame around the image, the border style and color can be changed when a user rolls over the image. The padding of 4 pixels set in the img declaration block allows for color change inside this frame as well. So, a simple move of rolling over an image creates a rich visual with only two declaration blocks.