CSS Cookbook, 2nd Edition

2017-07-07 02:10:07

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.