Beautiful CSS Borders for your Images

Written by Amit Agarwal on Jul 15, 2012

This CSS code will add a subtle border around your photos and images using drop shadows very similar to Pinterest pins.

.imgBorder {
  padding: 15px 15px 0;
  background-color: white;
  box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
  -moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
  -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);

To apply the CSS class to any image, use the following HTML code:

  <img src="img.jpg" class="imgBorder" width="200" height="200" alt="My Image" />

Subscribe to our Email Newsletter