LWD logoLori's Web DesignLWD logo

How to Add a Frame or a Border Around an Image
with a caption using CSS


Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph. The following will show you how to add a frame or a border around an image. You can also add a caption under the image using CSS. (If you are building a site set up for mobile then leave out the image height and width):

Frame an Image with a White 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, padding of 12pixels and a gray 1 pixel border, but change those to fit your own situation. Add this to your CSS file:

.imgframe
    { background:#D652D9;
    padding:12px;
    border:1px solid #999; }

Add this "imgframe" class to your image tag in the html file:

<img src="images/YourImageName.jpg" width="200" height="256" border="0" alt="" class="imgframe">

This should result in an image with a frame or thin border like the following:

border around image

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 this 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):

.img-frame {
    background:transparent;
    padding:8px;
    border:1px solid #999999; }

Add this class (img-frame) to your image tag in html file:

<img src="images/YourImageName" width="200" height="256" border="0" alt="" class="img-frame">

This should produce an image with a transparent frame like this:

image with border and transparent background

If you want to add a drop shadow see the dropshadow page.


How to Frame an image with a Caption

To add a caption to your image add the following to your CSS file:

.img-frame-cap {
    width:200px;
    background:#fff;
    padding:18px 18px 2px 18px;
    border:1px solid #999; }

Add this class to a div surrounding the image in the html file:

<div class="img-frame-cap">

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):

.caption {text-align:center;margin-top:4px;font-size:12px; }

The resulting code for your html file should look like this:

<div class="img-frame-cap">
<img src="images/YourImageName.jpg" width="200" height="256" border="0" alt="image name">
<div class="caption">Pink Rose</div>
</div>

This should result in an image with a frame and caption like the one below.

image with frame and caption
Pink Rose

Calculating widths 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.

Lori Eldridge
Copyright © July 31, 2011 - updated 4-22-17
All Rights Reserved

Return to CSS TIPS

Google


Twitter     Google+     Facebook     linked in