How To Make Rounded Corners In Blogger Blog

Posted by Vikram Rajpurohit 0 comments

How To Customize Your Blog For Rounded Corners

Now you can easily create rounded corners for everything in your blog like Post body, Sidebar,Navigator,Header,Comments,Widgets box etc.You just need to paste the below CSS border radius code in the  HTML section where you want to have rounded corners.

rounded corners border radius for all browsers


 -moz-border-radius:8px 8px 8px 8px;
-khtml-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;;
border-radius:8px 8px 8px 8px;


How To Make Rounded Corners For Every Thing In Your Blog

1.Go to Blogger Dashboard > Template > Edit HTML > Proceed

Now for instance,if you want rounded corners for your blog navigator ,then search for .navigator and place the above code inside it.It looks something like this..

  .navcontainer {
  .
  .
  .
  -moz-border-radius:8px 8px 8px 8px;
  -khtml-border-radius:8px 8px 8px 8px;
  -webkit-border-radius:8px 8px 8px 8px;;
  border-radius:8px 8px 8px 8px;
  .
  }



rounded corners for blog navigator

The same process apply for all other sections of your blog.Just search the sections(Post body, Sidebar,Navigator,Header,Comments,Widgets ) for which you want to make rounded corners and paste this four line code in it.

Note :If you want to make only top corners rounded then replace the fourth line of the given code with  
border-radius:8px 8px 0px 0px;


border-radius:            8px                      8px                       8px                         8px;
                                      Top Left              Top Right             Bottom Left             Bottom Right

Now save the template .That's it :)