X Close
T Saturday, September 13, 2014

How To Apply Round Corners Effect To Images In Blogger

fahim raza Be the first to comment!
101Helper blogging tricks

In previous post I told about how can you make your blog post images to auto zoom on mouse hover, this post is for those who are interested in making there post images round cornered. If we make each image of our blog round cornered then it is very difficult and it will take a long time to make all images round cornered, so I found a solution for this problem now you don't need to add code to each image simply add a css code to your blog and all images will be round cornered.
This code also lets you to customize the radius of corners and also change border color. 

How to make corners of images round?

Follow below steps to make your blog post images corners round:


(1). Go to you blogger Dashboard.


(2). Go to  template  and click customize.


(3). On the customization page click Advanced and scroll down till you find Add css. 


(4). Copy the below code and paste it in Add css tab. 


.post img {

border: 3px solid #bbbbbb;
margin: 0;
padding: 0;
border-radius: 50px;
-moz-border-radius: 1000px;
}
//.....http://101Helper.blogspot.com Customized images.....//

(5). Click  Apply to blog  on top-right of the customization page to save changes.


(6). Open your blog to see changes.


Customization:

  • To customize border color replace it with code of that color. How to get code of color?
  • To customize Radius of corners replace (50) in border-radius: 50px; to your own choice, it you want circled images replace 50px with 1000px.
  • To increase spaces between images and text replace (0) in padding: 0; with your own choice.
  • To increase border width increase 3px in border: 3px solid #bbbbbb;  to your own choice
Final words:

This code makes all images round cornered and images which have low width or height becomes oval so to overcome this edit there width and height by editing them.

Search Tags: How to apply round corners effect to images in blog, 101Helper css tricks, round corner images, blogging tricks, tips for bloggers,make images round with css in blogger,blogspot



No comments :

Post a Comment