How to use CSS to add Frames Around Images

This tutorial will show you how to set up frames around images without the use of tables by using CSS (Cascading Style Sheets). Most css frames require you to figure margin, border and background width exactly for each individual image. This method allows you to use the same style of frame on any size image.

CSS Classes:

I have set up border, margin, background and other classes with abbreviations because each image needs several classes

Css for Framed Images

Margins are needed to expand the background. The numbers near the front of the class represent width of background in pixels. The numbers on the end represent colors (000 = black). The images are set as block elements so IE 6 doesn't add a margin where we don't want it. A class for float left is necessary to keep the background and borders next to the image otherwise the browser will try and fill the whole containing block (table cell or page div) with the background color.

Step 1. Load Image with No Frame

Step 2. Add a 1 pixel black border around edge of image

This image has the class b1s000 added to the image tag as a class (border, 1 pixel, solid, color black). Another class, framedimg, is added to the same tag to tell the broswer to treat this image as a block element so no extra border is added on the bottom of the image in IE 6. Adding these two classes to the image tag eliminates having to add another div around the image.

Step 3. Add a white border with black background

This step adds a border of 3 pixels of solid white just outside the 1 pixel black border and then a 3 pixel black background on the outside of that. A class for Float left needs to be added also or the border will expand to the width of the page which in this case is 500 pixels. NOTE: The float class will force the image to align to the left of any cell or div container so centering is not possible with this method and you'll have to use other means to accomplish this like padding-left:25px; or something if you use a container or table cell with a border.

Step 4. Add a fuschia border around the image

You can stop with the above step or add a complimentary color to finish off the frame. I replaced the 2nd black border with a 3 pixel solid border of fuschia (same color as the flower) around the outside of the image.

Outset Frames not Supported in IE 6

There is a class in CSS2 that allows you to apply outset to a border which makes the bottom and right edges of the borders a shade darker (white turns to light gray, etc). However, when this article was written IE 6 in Windows didn't support the outset class. Here is what it would look like if it did:

The width of borders and backgrounds can be adjusted to provide much larger frames as in this example where a margin of 10 pixels was set up to expand the black background: