LWD logoLori's Web DesignLWD logo

How to Add a Frame with a Border Around an Image
and how to add a caption under a framed image with CSS


Recent Visitors.

Thanks for visiting

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 and border around an image. You can also add a caption under the image using CSS:


Frame an Image with a White Background

Add to your CSS file or style tag in the head of the document:

.imgframe
    { background:#ffffff;
    padding:12px;
    border:1px solid #999999; }

Add this class (imgframe) to the end of 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 and a thin border like the following:

border around image

You can increase the width of the frame by adding more padding. You can darken the border by changing the color of the border (instead of using #999999 which is a medium gray, change it to #000000 which is black, or some other color).



Framed Image with a Transparent Background

The padding around this frame is a bit thinner than the one above but you can make it wider by changing the padding.

Add to your CSS file or with a style tag in the head of the document:

.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


How to Frame an image
with a Caption Underneath

Add the following to your CSS file or with a style tag in the head of the document:

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

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

<div class="img-border-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>
</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 framed 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.



Follow Me on Pinterest


Return to CSS TIPS

order SEO analysis

Lori Eldridge
Copyright © July 31, 2011
All Rights Reserved

Twitter     My blog     Google+     Wordpress blog     Facebook     linked in