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.

See Also

Recipe 3.2 for removing borders from images.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net