Making Rounded Corners With CSS3 On Blogger

Few people kept mailing me regarding the rounded corners in blogger/blogspot blogs. They wanted to show rounded corners rather than the straight edges. Since the number of mails kept increasing regarding this tutorial, I thought to make a post about them. Pretty good example to illustrate this would be consider the following boxes. Just look at the corner sections of each box.

CSS ROUNDED CORNERS EXAMPLE

CSS STRAIGHT CORNERS EXAMPLE

The former looks curved while the latter is flat. That's the trick we are going to learn in this post, that is, to add rounded corners on blogger/blogspot blogs. You may use them in displaying a note(like I do) or may be on the navigation bars or to display HTML codes withing blogger posts and so on. So, you may use them where ever you want. Remember that, this trick will be visible only in the latest versions of Mozilla Firefox, Chrome, Safari and Opera and not in IE. Check out the browser specific attributes table below.

Enough of the stories!!! Let's implement this trick on our blogs now!!! Just, follow these simple steps.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2. Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

3. Now, paste the corresponding piece of code just above the line you searched in step 2. Paste according to your choice; not all of them.

EXAMPLE 1 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example1 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

EXAMPLE 2 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example2 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

EXAMPLE 3 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example3 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;
}

EXAMPLE 4 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example4 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

4. Once you have pasted the code. Save the template. Now, your ready to display them in the place you want. Just use a span or div tag to use the CSS3 of your choice. That is, paste the following code any where in the template area or as a HTML/JavaScript using "Add A Gadget" option on blogger design page or within your posts.

<div class="example1">PLACE YOUR CONTENT HERE</div>

5. Now, save your code. That's it!!!

Instead of adding pictures for rounded corners, if you make use of CSS, the time to load your site will be reduced enourmously. That's the biggest advantage with this trick. You might consider reading the following articles for speeding up your blogger/blogspot blog - Article 1 : Speed Up Your Blogger Blog, Article 2 : Speed Up Your Blogspot Blog, Article 3: Tips And Tools For Speeding Up Your Blog. Express your views about this post via comments!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Anonymous

Simply want to say your article is as tonishing. The clearness in your post is simply spectacular and i can assume you are an expert on this subject. Well with your permission allow me to grab your rss feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.

Mukund said on December 25, 2010 at 10:37 AM :

@Anonymous: Thanks for the comment! I'm not an expert at this topic. But, I'm happy to know that you understood the post very well! Thanks a lot! You can grab my RSS feed too!! Check out the widget at the right sidebar.

Chelise said on January 5, 2011 at 2:03 PM :

Awesome CSS Mukund. For an amateur blogger-

I would like to round the corners of each post on my main page. Is there a way of inserting the "div class" in my code? Do I have to insert it into each new post?

If I want to round my post corners, what should I insert in "PLACE YOUR CONTENT HERE"? Something like "main post"?

I'm using blogger's watermark template if that will help at all.

Thanks so much!

Mukund said on January 6, 2011 at 7:10 PM :

@Chelise: Yeah!! We can do that. If you want the post corners to be rounded, you need insert the code on the "Edit HTML" page. No need to insert them on each post. Just send me the code of your template and I will work it out!!!

Tara said on January 24, 2011 at 8:02 AM :

@Mukund

I copied the code for example 4 but am not sure how to apply it to my entire blog via my HTML blogger code.

I found an example blog here http://tramm-isms.blogspot.com/ and I'm dying to know how the web designer did this!! The cornered look to the blog is so very cool. The web designers page is here: http://www.onceuponablog.org/
but I'd rather learn this stuff myself.

Can you help??? Thanks for taking the time to write this. It seems so much more understandable than other sites I've found.

I'm just a bit lost at the last part.

Mukund said on January 24, 2011 at 2:44 PM :

@Tara: Yeah! I checked the blogs! For sure, I will help you with the code. Contact me via email!!!

Enggyd said on June 7, 2011 at 10:18 AM :

what about getting round corners for the whole page in the template and the header section

Mukund said on June 7, 2011 at 10:25 PM :

@Enggyd: The same coding applies to all the sections. When it comes to the header or the footer, you need to add the codes under the CSS section of your header. I hope you understood what I meant! If not just connect with me via email or gtalk..

Prayag Verma said on July 3, 2011 at 5:13 PM :

thanks a lot

Mukund said on July 3, 2011 at 7:25 PM :

@Prayag Verma: Yup! I hope you enjoy the other articles related to CSS as well! Thanks for the comment!

Feelers said on July 16, 2011 at 7:41 AM :

It's awesome! But how do you seperate the boxes while still having rounded edges?

Mukund said on July 16, 2011 at 10:40 AM :

@Feelers: May I know what boxes you are talking about? If it's those grey boxes, then you don't have to worry about anything, just add the CSS, it'll automatically separate the stuffs for you! Need help? Ping me via gtalk!

BLOGGERspherepedia said on August 6, 2011 at 6:54 PM :

This is nice various articles, i can get a lot informations from yours webs...
oh yeah, i have problem to build box ads like buysellads.com, can you give me the solutions?
(david_mangalindak@yahoo.com, owner )

Mukund said on August 6, 2011 at 8:02 PM :

@BLOGGERspherepedia: Why not!! I would love to help you create such boxes! Sent an email to above mentioned address! Thanks for the comment buddy!

Jean Sébastien said on September 10, 2011 at 7:16 AM :

Hello
I need help i think you can help me...I need to add a banner in my blog's header,can you help me please?
thank you very much

Mukund said on September 10, 2011 at 10:37 AM :

@Jean Sébastien: Sure! I need to look at the coding on your blog! Send me an email stating the same! I'll help you out:)

Jean Sébastien said on September 11, 2011 at 4:44 AM :

Voici mon blog http://imsurfin.blogspot.com
I need to put a banner in header like you
Thank you very much

Mukund said on September 11, 2011 at 1:36 PM :

@Jean Sébastien: Yeah! It's pretty simple! Just hit me with an email! I'll tell you what to do:)

There is no "Dashboard => Layout => Edit Html" choice.

Are you using the old interface, or the new one?

Neither have it.

Mukund said on October 25, 2011 at 12:40 AM :

@Anonymous: I posted articles and I post articles based on the old interface! If you need help in adding the same, just hit me via email!

getready said on January 1, 2012 at 11:42 AM :

Thank you for giving article i added to my blogger http://strongarticle.blogspot.com/

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT