Search Blog

How To Make All Blogger Posts Images Round Corners

I have already discuss many time in my articles that template design is very important.Today we will make blogger thumbnail images round corner.You do not need any third party tool to do this.It make your images more attractive.when viewers go to your blog home page or other page you blog thumbnail image looks round corner like circle.

I discus two things.First how to make specific image round and other is how to apply this effect to all images.Adding some new code in style sheet will make your image round.Do not use very large image because after making changes for this effect can make image fade.This effect do not increase loading time of blog.It is light and has only few lines of code but it is very amazing.

Introduction to style

If we want to change individual image dimension then the process will be different.When you upload while writing post you have to upload  image then you have to made some changes in html editor.normally when we upload image it is in square shape and every image has a link.after publishing post when some one click on image it open and you can see url in the browser.We can make single image round corner by editing html of post.

addd round image corner

In the image you can see the sample of round thumbnail of post.every template design is different.I apply and check this on my template,  it is working properly.Thumbnail image of post is show below post title and at the side there is description of post before jump break and after that there is read more option.I will also tell you how this effect choose what is the proportion of image that will be round.This effect automatically adjust with template and show image accordingly.

blogger customization

Now the image above is also part of this effect.Actually when you open up the post or click or post title to read full article the image dimension become changes.Then image become large, it also good because viewer can see full can see the still in round shape but the proportion of roundness become changes.

Add round corner on blog images

First login to blogger account

Go to template and click customize

Go to advanced click add css

Paste the below code there

adding css

img {border: 2px solid #BADA55;margin: 0;padding: 0;border-radius: 900px;-moz-border-radius: 900px;}

Click apply to blog and visit your blog to confirm.The border around image is green but you can change it.To change color of boarder replace the #BADA55 with your desired color code.

Here is few color codes

blue  #3c69ff

red  #d73a31

The boarder roundness of image is according to code.It is recommended, do not change radius because if you change radius it change the proportion of round corner.

IconIconIconFollow Me on Pinterest
Blog Widget by LinkWithin