Home
Blogger

Add Border and Shadow Around Blogger Post Image

how to add Border and Shadow Around Blogger Post Pictures
picture border

Blogger user might seen the post image come with border and shadow. It varies template to template. You can create different type of border and shadow of your blog images on home page as well as on post page. Actually border isolate the post image from other part of the post. And you can also make your blog image beautiful by adding Border and Shadow. Suppose if you are using white background picture but your blog body is white color then your blog image won't be attractive on post page. sometimes post image seems to readers hazy. But if you use border then visitors can isolate image area.

In this tutorial we will see how we can add different style border and shadow on blog images. Please follow the following tutorial-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find the below code by pressing Ctrl+F
.post img{
..................................................
..................................................
..................................................
}

or

.post img
{
..................................................
..................................................
..................................................
}

or

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
..................................................
..................................................
..................................................
}

or

img {
..................................................
..................................................
..................................................
}


Step 4 Now replace the whole code by any of below code.

Style 1: Border with Image Opacity

This border will display only simple black border for post image with Image Opacity feature.
simple

.post img {
border: 5px solid #000;
background: #000;
filter:alpha(opacity=30);
opacity:0.6;
padding: 1px;
}

Customization

  • Alter 5px for increase thickness of border
  • Change this for border background color #000

Style 2: Simple Border with white radius

This border will display only slim white border for post image.
white border

.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Customization

  • Alter 1px for increase thickness of border
  • Change this for border background color #ffffff
  • To remove border radius remove below line-
                     -border-radius: 5px;
                     -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;

Style 3: Dotted Image Border with radius

This border code with display image with dot. Similar like stamp.
dashed border

.post img {
padding: 8px;
background: #ffffff;
border: 3px dotted #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Customization

  • Alter 3px for increase thickness of border
  • Change this for border background color #ffffff

Style 4 Border like Stamp style

This border code with display image with stamp style on edge area.
stamp border

.post img {
padding: 8px;
background: #ffffff;
border: 3px dashed #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Customization

  • Alter 3px for increase thickness of border
  • Change this for border background color #ffffff

Style 5 Simple double lined border

This border code with display image with double border style you can easily change the border color.
double border

.post img {
padding: 8px;
background: #FFFFFF;
border: 5px double #B8B4B4;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Customization

  • Alter 5px for increase thickness of border
  • Change this for border color #B8B4B4
  • Change this background color #ffffff

Style 6: Groove style  border for image

This is different but simple and professional looking.  
ridge style

.post img {
padding: 8px;
background: #FFFFFF;
border: 5px groove #B8B4B4;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Customization

  • Alter 5px for increase thickness of border
  • Change this for border color #B8B4B4
  • Change this background color #ffffff

Style 7: Ridge style border

This border is similar like photo frame. Your blog image will be inside the frame. But used pure CSS.
groove style

.post img {
padding: 8px;
background: #FFFFFF;
border: 8px ridge #4D4D4D;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Customization

  • Alter 8px for increase thickness of border
  • Change this for border color #4D4D4D
  • Change this background color #FFFFFF

Style 8:Inset style border for blog image

This style will display your blog image dark to light color.
inset border

.post img {
padding: 8px;
background: #FFFFFF;
border: 8px inset #4D4D4D;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Customization

  • Alter 8px for increase thickness of border
  • Change this for border color #4D4D4D
  • Change this background color #FFFFFF

Style 9:Outset style border for blog image

Outset just opposite of Inset style. Blogger image border will be shown lighter to darker.
outset border

.post img {
padding: 8px;
background: #FFFFFF;
border: 8px outset #4D4D4D;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Customization

  • Alter 8px for increase thickness of border
  • Change this for border color #4D4D4D
  • Change this background color #FFFFFF
Hope now you would able to add different border in your blog. And this will give you a new look of your blog. Visitors must be become interested to view your image. because adding border and shadows makes a blog image appealing.

6 comments

  1. awesome share
    • Thanks Aslam.
  2. lovely
    • Thanks Bro :up
  3. which template you are using ?
    can you please tell me tha name
  4. Thanks bro... wish you all the best
Go Up