How to Add a Frame to an Image or Add a Border with CSS
Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph but without using a graphics program like Photoshop or Fireworks. This can easily be accomplished by using CSS (Cascading Style Sheets) to format the image, like in the photo shown here.
The benefit of using CSS is that you can change the border color, style and width along with other features on multiple images by just adjusting the CSS file, instead of editing each image individually. The following will show you how to add a frame or a border around an image with CSS. You can also add a caption under the image.
Frame an Image with a Colored Background
First you need to set up a class in your CSS file for the frame. I labeled this class "imgframe" but you can name it whatever you want. I set this one up with a pink background (the same color as the rose). You can use the eye dropper feature in your graphics program to pick up the hexadecimal color code. Then I added padding of 12 pixels and a gray 1 pixel border, but change those to fit your own needs. Add this to your CSS file:
border:1px solid #999; }
If you are building a site set up for mobile then leave out the image height and width unless the image is already small enough to fit on a small mobiile device.
Add this "imgframe" class to your image tag in the html file:
This should result in an image with a frame or thin border like the following:
You can increase the width of the frame by adding more padding. You can change the color of the border and the background by altering the colors in the imgframe class.
Framed Image with a Transparent Background
The padding around the following frame or border is a bit thinner than the one above but you can make it wider by changing the padding. For a transparent background add the following to your CSS file (notice I changed the name of the class on this image):
border:1px solid #999999; }
Add this class (img-frame) to your image tag in html file:
This should produce an image with a transparent frame like this:
How to add a Drop Shadow Under the Image Frame or border
If you want to add a drop shadow add the following to your css file:
Being as an image is an inline element we will need to add "display:block;" to the image class in CSS otherwise there will be white space under the image frame or border, but before the drop shadow. So now your CSS file should have the following:
border:1px solid #ccc;
box-shadow:5px 5px 5px #999; }
Your image should now have a drop shadow on right and bottom sides, outside of the frame, like this:
For more information on drop shadows see the CSS Drop Shadows page.
How to Frame an image with a Caption
To add a caption to your image add the following to your CSS file:
padding:18px 18px 2px 18px;
border:1px solid #999; }
Add this class to a div surrounding the image in the html file:
You also need to set up another class to format the text so the caption is centered under the image. I've added a margin of 4 pixels above the text so it's not right under the image (you can format font style's here also):
The resulting code for your html file should look like this:
<img src="images/YourImageName.jpg" width="200" height="256" alt="image name">
<div class="caption">Pink Rose</div>
This should result in an image with a frame and caption like the one below.
Calculating Padding Widths so It's even on all Sides of the Image
I have set the frame width to the same width as the image (in this case it's 200 pixels). The caption under the image takes up extra space within the frame. The font for this caption is 12 pixels high and I added a top margin of 4 pixels so it's not right under the image. I added 2 pixel padding on the bottom of the text so it's vertically centered within the bottom of the frame.
So we have 12 pixels for the font, plus 2 pixels padding on bottom, plus a 4 pixel margin on top of the text which equals 18 pixelsl. This is the amount we need to set for the top and sides of the frame. You'll have to adjust the padding in a similar manner for your image so it's even on all sides.
You can center or left or right align the frame div by setting up another div on the outside of this one and applying equal margins on both sides for center, or float:left, or float:right.
Copyright © July 31, 2011 - updated 10-09-19
All Rights Reserved