Add Border and Shadow Around Blogger Post Image

Add Border and Shadow Around Blogger Post Image 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 1Log in to your Blogger account and Go to your Blogger Dashboard Step 2Now click on - Template - Edit HTML Step 3Now 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 4Now 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. .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. .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. .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. .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. .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. .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. .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. .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. .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.