Add Border Around Post Images On Blogger – CSS

0
3510

Not familiar with Photoshop or any other photo editors to add CSS border style to your images? Learn how to add beautiful CSS border to images/photos with drop shadows using CSS code just similar to Pinterest pins.

This CSS code will add a crystal-clear border around your pictures, photos and images with drop shadows effects.

css-image-lalit-sharma

If you are a blogger or web designer, then you may know the importance of images on a webpage. Well, images on webpages make website more beautiful and attractive. It gives good impression to the website visitors and attract the visitors to check around the contents.

Now avoid posting boring images on your blogs as here we are sharing a small CSS code that will help you to add border to images. You can use this CSS code on any webpage including BlogSpot and WordPress blogs.

How to Add Border to Image in HTML Websites

Want to put border to image in static websites? Use below CSS code to add border to images in HTML web pages.

1. Simply add following CSS code into your website’s main CSS file or custom CSS field.

.imgBorders {
  padding: 10px 10px 10px;
  background-color: #FFF;
  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);
}

2. Now use below HTML code to apply CSS border style to any images.

<img class="imgBorders" src="paste_your_image_url_here.jpg" alt="My Image" width="250" height="250" align="middle" />

Now put the image URL in the “src” tag in above HTML code for what you want to add CSS border and add alternate text in “alt” tag (effective in image SEO).

Add CSS Border to Blogger/WordPress Posts

Follow below instructions to add beautiful image borders in WordPress or blogger posts:

1. Go to HTML/Text editor section of your post.

css-borders

2. Copy below CSS code and paste it into your posts.

.imgBorders {
 padding: 10px 10px 10px;
 background-color: #FFF;
 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);
 }
 &lt;/style&gt;
 <img class="imgBorders" src="paste_your_image_url_here.jpg" alt="My Image" width="250" height="250" align="middle" />

3. Publish/Preview your post and its done.

Add your image link in the “src” tag for what you want to add CSS border and optionally you can add alternate text in “alt” tag (effective in image SEO).

Changes did not made? Remove browser caches and cookies and reload the webpage again to see the added border to your images.

Share your Views / Comments / Suggestions ✍