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. The trick is to wrap your images in a div and add a simple class.

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.