Create a CSS Frame for Images

Create a CSS Frame for Images

Many images look nice a frame. You typically frame pictures before hanging them on a wall so why not add a frame to images on your website. Just like what you can see how every article image here at instantShift is framed using modified verion of this very same trick.

The trick is to wrap your images in a div and add a simple class.

The HTML:

1	<div class="frame"><img src="" alt="" height="" width=""></div>

The CSS:

1

.frame {

2	border: 2px ridge #000;

3	padding: 10px;

4	background-color: #fff;

5

}

6

7	.frame img {

8	border: 2px solid #ooo;

9	padding: 1px;

10	margin: 10px;

11

}

You can use a variety of border-style values to create different looks to the frame (groove, ridge, inset, outset, double, dotted, dashed, solid). The padding and background-color on the frame div will create the look of a mat around your image. Adding border, padding, and margin to the image itself can create the effect of having a second mat around your image for an extra effect.

Once set up all you’ll need to do to add your frame to any image is wrap it with a div and assign the class. You can even create several different styles of frames and then pick and choose which to use for each image.