How To Make Rectangular Image To Rounded Image With CSS

Image is an important part of your blog post and a blog post should contain atleast one image in appropriate position. Appearance of image should also be taken into account that's why previously Blogger launched light box service, a light color shadow around images, option to improve image appearance. Now here we are talking about a trick that makes your images to round in shape with few lines of CSS code.

You can apply these rounded image technique to all the images or you can use it for some specific image it is up to you.

You can also done SEO of your images from here.

How To Convert Rectangular Image To Rounded Image

If you are interested to make a particular image rounded then the corresponding CSS code is given below.

 
<style type="text/css">
.circle
    {
  width: 150px; 
  height: 150px;
  border-radius:99em;    
 -moz-border-radius:99em;  /* for firefox */
 -webkit-border-radius:99em; /* for chrome and safari */
  -o-border-radius: 99em;  /* for opera */
   
}
</style>

Now the images with CSS id circle will have rounded corner, you have need to add an image and apply a circle class to it. Width and height values (150px) in above CSS code should be same to make a circle.

How To Make Image Rounded In Blog Post

To use above CSS code we can also make image rounded in blog post.

Go to Blogger dashboard.
Create a new post.
Include an image that you want to use in your blog post and see the source HTML code of blog post.

Add above CSS code at top most position.
Now find <img tag, which contain image that you want to modified, and apply a class circle in it further remove width and height attribute from <img> tag.

<div class="separator" style="clear: both; text-align: center;">

<a href="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s1600/blogger-post-editor.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" height="49" src="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s320/blogger-post-editor.JPG" width="320" />
</a>
</div>

Change the above code to.

<div class="separator" style="clear: both; text-align: center;">

<a href="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s1600/blogger-post-editor.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img class="circle" border="0" src="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s320/blogger-post-editor.JPG" />
</a>
</div>

What we have changed?

Remove height and width attribute from <img> tag and you have to control the dimensioning of image through CSS width:150px and height:150px properties.
And apply a circle class in it.

In similar way you can make another images rounded.

More articles