LWD logoLori's Web DesignLWD logo

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.

fuschia with a frame

CSS Classes:

I have set up border, margin, background and other classes with abbreviations because each image needs several classes:
  • Border: b
  • Margin: m
  • Background: black
  • Float Left: fl
  • Solid: s
  • #9966ff: fuschia
  • #fff: white
  • #000: black
  • framedimg display as block
Css for Framed Images

.m3 {margin:3px;}
.b3sfuschia {border:3px solid #9966ff;}
.b3sfff {border:3px solid #ffffff;}
.b1s000 {border:1px solid #000000;}
.black {background: #000;}
.framedimg {display:block;}
.fl {float:left; clear:left;}

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

fuschia with a 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.

class="b1s000 framedimg"

fuschia with a frame

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.

< div class="black m3 b3s000 fl"><div class="black m3 b3sfff">

fuschia with a frame


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 around the outside of the image.

<div class="black m3 b3sfuschia fl"><div class="black m3 b3sfff">

fuschia with a frame



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 IE 6 in Windows doesn't support the outset class. Here is what it would look like if it did:

fuschia with an outset frame


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:
.m10 {margin:10px;}.


fuschia with a frame




Google
Follow Me on Pinterest

Also see:
How to Add a Border Around a Image with CSS

How to Add a Border to a Web Page with CSS

order SEO analysis

Return to CSS TIPS or see frequently updated Seo Tips on my home page.


Copyright © 1-6-08 updated 2011-11-19
Lori's Web Design
All Rights Reserved
Twitter     My blog     Google+     Wordpress blog     Facebook