CSS Code For Beautiful Image Borders

CSS Code For Beautiful Image Borders

Date 6/2/2013
Everyone knows what images are, as we all have seen images on web pages. Images are not technically inserted into a web page (to be nerd precise), rather images are linked to web pages and typically we use the image tag (<img>) to create holding space (or a reference to the image) for the image.
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" />

For Give a image rounded corner edge use this css code with shadow effect. 

  .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);
border:1px solid #f9f9f9;
border-radius:5px;
border-shadow:0 4px 16px rgba(0,0,0,.2);
}

CSS Code For Beautiful Image Borders