Posted By

michellebracken on 08/18/11


Versions (?)

Create a CSS Frame for Images

 / Published in: CSS

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.

  1. The HTML:
  3. 1 </pre>
  4. 2 <div class="frame"><img alt="" width="" height="" /></div>
  5. 3 <pre>
  8. The CSS:
  10. 01 .frame {
  11. 02 border: 2px ridge #000;
  12. 03 padding: 10px;
  13. 04 background-color: #fff;
  14. 05 }
  15. 06
  16. 07 .frame img {
  17. 08 border: 2px solid #ooo;
  18. 09 padding: 1px;
  19. 10 margin: 10px;
  20. 11 }

Report this snippet  

You need to login to post a comment.