How to modify or change image border in Blogger

In previous post you probably have read my post about how to remove image border from your Blogger posts, in addition here i want to show you how to modify, change, add styles or effects to the border of your images as well.

There are number of methods to change the color of the image border in Blogger. Here is one of them:

• From your Blogger dashboard, go to Layout – Edit HTML (no need to check the Expand Widgets Template box).

• Find the following code, you can use Ctrl + F to find them via your browser finder:
  
  .post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
  
  or
  
  img{
  padding: 4px;
  border:1px solid $bordercolor;
  }
  

• The code above is the tag for your images style. After you found it, change the following line:
  
  
  border:1px solid $bordercolor;
  
  to
  
  border:1px solid #FF00FF;
  

• Replace the red color text above with your own color HTML code. For example if you want it to be dark red: border:1px solid #B40404; or if you want it to be light green: border:1px solid #A9F5A9.

• After you’re done click Save Template button to save your changes.

To change the border line style around your image from solid line to dotted line you can simply change the word like this:

border:1px dotted $bordercolor;

To change the border line style around your image from solid line to dashed line you can simply change the word like this:

border:1px dashed $bordercolor;

Dashed style.

The word control the type of your image border, and other types of line style that you can use as a border are "groove", "inset", "outset", "double", "ridge" and "hidden". Try replace with those words and see how it looks like.

border 8px Groove, padding 2 px	border 8px Double, padding 2px
border 8px Inset	border 8px Outset
border 8px Ridge, padding 2px	border 8px Dotted

What is padding? Padding is a space between your border and your image. To increase or decrease the space between your border and image you can change the pixel number from this following line:

padding: 5px;

To add a background to your image as border:
To add a background effect you must have your padding on, after you add your padding then you can add this following line to your code:

background: url(Image Location);

Replace the Image Location text to your image URL. Your code should then look like this:

.post img {
border: 6px solid #FF0080;
padding: 12px;
background: url(Http://www.pichost.com/myimage.gif);
}