Add CSS3 Rounded Border Wrap To Blogger Templates

Do you want to renovate your Blogger Template by adding a Cool CSS3 Round Border to it? Though, Blogger is not famous for its customizing and optimizing but still we can make a masterpiece with it.  Everyone loves simplicity, but it is essential to have a spotless theme that reflects professionalism. By adding Round border to blogger template, a person adds more spice to his blog. Moreover, he can even add multiple backgrounds that will surely amuse his readers. Therefore, after receiving lots of requests from our readers today finally we are sharing our CSS3 Rounded Border Wrap for Blogger enable websites.

Why To Use CSS3 Rounded Border WRAP:

How many people’s brains are unclear that whether their site fits the resolution of some old monitors? By saying that we are living in the modern era, a person is running away from the truth, and that is most people are still using old monitors to browse the whole internet. If a Person has decent traffic, then the probabilities are particularly on a higher side that most of his visitors are browsing his website through their smallish monitors. Since, his site is design for large screen monitors so it would not fit smallish monitors. Therefore, it is essential to add a wrap border to your templates that automatically fits the screen of large and small monitors.

How To Add CSS3 Rounded Border Wrap In Blogger Templates:

The steps mentioned below are extremely straightforward all you need to do is to follow them as it is. It would hardly take 5 minutes to complete the integration. Do as mentioned below.

  • Go to >> Template.
  • Take Backup of Template.
  • Now Press Edit HTML >> Proceed.
  • Then within your template search for ]]></b:skin> and above it paste the following CSS3 Coding.
#mblwrap {
  background: #Ffffff;
  width: 960px;
  margin: 10px auto 5px auto;
  padding: 0;
  position: relative;
  border-right: 15px solid #333;
  border-left: 15px solid #333;
  border-top: 10px solid #333;
  border-bottom: 15px solid #333;
  box-shadow: #333 0px 1px 3px;

  • Now once again in template search for <body> and just below it paste the following HTML code.
<div id='mblwrap'>

  • Last but certainly not the least search for </body> and above it paste the following HTML code.

All Done: That’s it save your Template, and CSS3 Rounded border WRAP is set up to your blog. Now go ahead enjoy the picture perfect results. Note: This plugin is made by the MBL Developers, so don’t replicate without the permission of the administrator. . 

From The Editor’s Desk:

Hope you have enjoyed our personalized Wrap Widget. It’s been a while now that we haven’t shared any Blogger Templates. Therefore, our developers are trying their level best to formulate a masterpiece. There are some surprises coming up so stay tuned. Take a lot care of your family till then, Peace, Blessings and happy Wrapping. 

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


November 2, 2012 at 12:17 PM

Nice tutorial and great advice but iif i want to use a curly design border ?
İs this posible and how?
Thanks a lot.

November 2, 2012 at 3:35 PM

nice tutorial..

November 2, 2012 at 8:29 PM

Thankyou !!!!!! It bought a very compact look for my blog !!

Love u for this :D

November 2, 2012 at 8:57 PM

Nice Tute. why you used mozilla prefix -moz-border-radius:10px; ? It is now obsolete.

And I want to write a Guest Post in your Blog, How can I do that?

Pure CSS3 Expanding Vertical Navigation Menu for Blogger

November 2, 2012 at 10:05 PM
This comment has been removed by a blog administrator.
Editorial Team MOD
November 3, 2012 at 1:14 AM

We are Pleased that you are happy with the end results. Peace and Blessings

Editorial Team MOD
November 3, 2012 at 1:14 AM

We will Try our best to design Curly Border. Peace and Blessings

Editorial Team MOD
November 3, 2012 at 1:15 AM

Well! Currently we are't accepting guest posts. However, in the near future we will surely accept them. Peace

November 3, 2012 at 10:15 AM

great work faizan.keep the flow

November 5, 2012 at 4:40 AM

Hi Faizan

Is to possible to do with word press?

November 6, 2012 at 1:22 AM

Thanks a lot for sharing works perfect. Keep it up!

November 18, 2012 at 4:24 AM

i can not find body starting html tag in my tem.
plz help me :(

November 27, 2012 at 4:56 AM

hey friend....
can you help me how can i create that rectangular background (saying my bloggerlab in left) in which you have written the codes....

November 28, 2012 at 4:02 PM
This comment has been removed by a blog administrator.
November 30, 2012 at 1:46 AM

Syed This is simply awesome Thanks !!!

December 3, 2012 at 8:36 AM


December 10, 2012 at 12:01 PM

I don't have body tag in my html; is there any other word for that

Editorial Team MOD
December 10, 2012 at 3:38 PM

Can You Please Provide the URL Of your Website so we can tell where you can Paste the Coding. Peace

Editorial Team MOD
December 10, 2012 at 3:39 PM

Yeah, Sure we have already shared an Article on it. We hope it is easy to Apply. Consider the Following URL

Peace and Blessings

Editorial Team MOD
December 10, 2012 at 3:42 PM

IF you aren't able to Find Body Tag then Search for

<body and paste the Coding when it Gets end.

Alternative: It would be better if you provide the URL of your Blog so we can tell you more properly. Peace

Editorial Team MOD
December 10, 2012 at 3:43 PM

Yeah, It is possible to in WordPress to but the Dynamics of WP is different. You can try your luck. Peace

December 11, 2012 at 5:15 AM

Dear Faizan; URL of my website is

Editorial Team MOD
December 11, 2012 at 7:18 AM

In your Template Search For <body class='loading'> and Just Below it Paste The

<div id='mblwrap'>

Now Once Again Search For </body> And This Time Above it Paste the Ending DIV


Hope that Answers your Question. Peace

December 13, 2012 at 8:01 AM

I have added this to my blog but i think my menu is somehow distrubed.Can you please check out what may be the problem.
Regards,Azad hussain laskar.

My blog:
Visit Azadfunclub

Editorial Team MOD
January 2, 2013 at 12:35 PM

We checked your site and it is fine. :)

March 11, 2013 at 3:04 PM

I have an error
The element type "body" must be terminated by the matching end-tag "

March 12, 2013 at 2:10 AM

Nice post really like it
Visit my blog
PAK Games and Softwares

July 7, 2013 at 2:31 PM

love this tutor. tnx 4 sharing

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.