56 How to add CSS Rounded Corners to your Blogger Template
March 21, 2008 /

Rounded corners can add a great deal of style to an otherwise simple Blogger template. Luckily, you don't need to create complicated images and CSS code to achieve this: Spiffy Corners is a free service which generates code that you can simply add to your Blogger template, and no externally hosted images are required!

Since I originally wrote about Spiffy Corners, many people have asked me where they should paste the generated code in order to make those rounded corners appear. So in this article, I will offer a full explanation of how to use Spiffy Corners to create rounded corners in the main and sidebar sections of your Blogger template.

What is Spiffy Corners and How Does It Work?

Spiffy Corners is an online generator which creates CSS and HTML code to create anti-aliased rounded corners for your web/blog design. The code generated by Spiffy Corners does not require any images or JavaScript; using this method to create rounded corners for elements of your blogger template will not slow down page loading time at all, and can add a truly distinguished look for your theme.

The way this method works when added to your Blogger template is simple and yet truly effective! Spiffy Corners generates purely HTML tags which are styled using CSS; when you add the HTML section to your Blogger template, the area it creates appears to have rounded corners because of CSS styling.

The HTML tags are contained within a DIV element.As DIVs expand to the complete width of their containing element, it is important that this code is placed inside another element, or the color will seem to bleed across the whole template and spoil the effect.

How to use Spiffy Corners in your Blogger template

To explain how to use Spiffy Corners in your own Blogger template, I will use the default Minima template as an example. The same principles will apply no matter which template you are using, and I will outline possible differences in template code where appropriate.

Currently, my Minima template appears like this:

I would like to add a pale blue background with rounded corners to the main posts column. Note that the main background color of my blog is white.

First of all, I need to visit the Spiffy Corners website to generate the correct code and color scheme to create the rounded corners for my main section.

Here is what the initial screen looks like:

Here I need to choose the background and foreground colors to generate the correct code for my design.

As my background color is white (hex value #FFFFFF), I choose this for the background color. The hex value #C3CCEE is a nice shade of pale blue which I choose for the foreground color.

There are three degrees of "roundness" defined beneath the color choices: 3px, 5px and 9px, but unfortunately only the 5px radius currently works!

When I click on the 5px button, this displays an example of what my rounded corners will look like, and generates the correct code for me to use in my blog template:

How to use the code provided

This is generally considered the most problematic part of using Spiffy Corners (especially when used for Blogger template designs!).

I'm going to break this down into three sections of code which should help explain exactly where to copy and paste the code.

The CSS Section

The CSS code which I generated for my pale blue rounded boxes appears like this:

<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#C3CCEE}
[more code here]
.spiffy5{
border-left:1px solid #d2d8f2;
border-right:1px solid #d2d8f2}
.spiffyfg{
background:#C3CCEE}
</style>

In this example, notice that I've highlighted the <style> tags in bold red. When using this code in your Blogger template, these style tags are unnecessary!

To add this style code to my template, I will copy the CSS code (excluding the unnecessary style tags) to my clipboard.

Then in a different tab/browser window, I need to go to Layout>Edit HTML in my Blogger dashboard without clicking the "expand widget templates" box. The style code I have copied needs to be pasted just before the closing <b:skin> tag in my template:

.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#C3CCEE}
[more code here]
.spiffy5{
border-left:1px solid #d2d8f2;
border-right:1px solid #d2d8f2}
.spiffyfg{
background:#C3CCEE}

]]></b:skin>

Now for the HTML code!

I now need to add the HTML code which creates the rounded corners to the main posts area of my blog template.

The HTML code generated by Spiffy Corners should clearly shows where to put my content (IE: the widget used to display my blog posts). But to work with this effectively, the code should be split into two sections, like this:

Splitting the HTML code into these two sections will make it much easier to work with!

To start with, I will copy "Part 1" of this code to my clipboard. I need to add this just after the opening DIV tag for the main posts section.

Next I will copy "Part 2" of the HTML code, and paste this just before the closing DIV tag for the main posts section.

Here is the code in my Blogger template which shows exactly where I should paste these different sections of code:

      <div id='main-wrapper'>; <!-- This is the opening DIV tag >
Paste Part 1 of the HTML Code Here!
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Paste Part 2 of the HTML Code Here!
</div> <!-- This is the closing DIV tag -->

Note: For different templates, the "main-wrapper" DIV may be named something different, such as "main-wrap" or even "main". The best way to find where exactly to paste your code is to look for this section in your blog template:

        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
And paste the relevant sections of code above and below this.

Now if all goes to plan, when previewing the template it should appear like this:

In this case, I can save my template for the rounded corners to appear around my main posts section.

But unfortunately, Blogger templates can be quite finicky when trying to use Spiffy corners... Which is where the troubleshooting comes into play!

Troubleshooting Spiffy Corners

The most common problem experienced when using Spiffy Corners in Blogger templates is a gap between the corners and the main content section:

This can be quite infuriating, especially as this doesn't occur in all template styles! But there is a solution: adding negative margin values to the top and bottom of the "spiffyfg" div. This draws the top and bottom margins inwards and reduces the gap.

The easiest way to draw the margins in is to add margin properties in the style section of your Blogger template.

In my example template, the style for "spiffyfg" is defined like this:

.spiffyfg{
  background:#C3CCEE;
  margin: -15px 0 -20px 0;}
The code highlighted in bold red is additional margin properties which I have added to draw those margins inwards. In your own template, you may need to adjust the values of these negative margins slightly to prevent any of your content being clipped by the margins.

This technique has worked for me each time there was a gap between the top and bottom sections of my rounded corners. I hope it will work for you too!

Using Spiffy Corners in Sidebar Sections

To round the corners of your sidebar(s), the same principles apply.

Here is the template code for the sidebar in my example template which shows where you will need to add the Spiffy Corners code:

      <div id='sidebar-wrapper'>
<!-- Paste Part 1 here -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
<!-- Paste Part 2 here -->
</div>

In different templates, the <div id='sidebar'> may be named differently. If you are able to locate this section of code (or similar) you should paste the HTML code for your Spiffy Corners directly above and below as appropriate:

        <b:section class='sidebar' id='sidebar' preferred='yes'>
<!-- widget codes here -->
</b:section>

Using different color schemes for different elements

One of the great things about Spiffy Corners is that you can create many different color schemes and name each one differently.

For example, if you wanted a red foreground for your main posts section, and a blue foreground for your sidebar, you can generate two different sets of code named "Red" and "Blue" respectively.

You can then add the CSS code for both "Red" and "Blue" to the <b:skin> section of your Blogger template, and paste the corresponding HTML code in the main and sidebar sections.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

56 comments:

  1. I just found your site. I'm finding it to be very informative. If I follow just 15% of what you've put up, then I'll be a long way to where I'd like to go with the design of my blog. Again, thanks so much for your informative posts!

    ReplyDelete
  2. tsippl@gmail.com1 April 2008 03:04

    Your site is invaluable to me. I am trying to help someone create a three column site with rounded corners.

    I have followed the three column instructions and was successful completely.

    But when I try to add this code to make the rounded corners, I fail.

    Any ideas?

    Thanks VERY much.

    ReplyDelete
  3. For tsippl: do you receive any error messages when adding these codes to your template? Let me know what this may be and I will try to offer some more specific help for you.

    Best wishes,

    Amanda

    ReplyDelete
  4. This didn't work for me either. I kept getting an error about my div tags.

    ReplyDelete
  5. Nevermind, it works! You should probably add somewhere to not copy your code, but only the code generated at Spiffy Corners. I don't think that's clear in your entry.

    ReplyDelete
  6. Hi Amanda, thanks for your tips and tricks! I managed to create rounded corners for my blog. =) You rock!

    ReplyDelete
  7. Hi Amanda,
    first of all I love your blog, it's useful and provides really nice tricks ^___^

    I'm posting this comment for a little troubleshooting, if possibile: I'm tryin' to implement spiffi corners on my blog, thus testing it here:
    http://provedilayout.blogspot.com/

    I use your TicTac Three Column (Green) template (hey, I said I LOVE your blog... I've followed many of your tutorials ^__^), obviously customized to fit my needs, but to test the corners I've stripped it from every background specification.

    I tried to give rounded corners to my main post section.
    You can see the result, they're "invading" the right sidebar.
    I'm quite sure I'm doing it right, but it's clear that I'm missing something.
    Any suggestion?

    I hope you don't feel treated like a help desk, this is not the intention ^________^

    ReplyDelete
  8. Oh, I can provide the code if necessary, of course ^______^

    ReplyDelete
  9. Hm, not sure what is going on here but I am getting some errors. The CSS code pastes fine, but once I add the html code and try to preview I get this:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:includable" must be terminated by the matching end-tag "".

    ReplyDelete
  10. CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html

    ReplyDelete
  11. Hi there, thanks for the in detail tutorial how roudn the corners. Going to try it today on my page. Thanks again. keep up the good work :)

    www.londontowncarhire.co.uk

    ReplyDelete
  12. This one was a lot of fun. Now I just need to redo my header with rounded corners so it will match (because I'm just like that!)

    Keep 'em coming - I use a lot of your ideas and love them!

    ReplyDelete
  13. Oli from the-iBlog16 May 2008 21:10

    I have a problem where when I try to use this inside a post, I just get horizontal lines. I'm using Wordpress though ;)

    ReplyDelete
  14. hiya,
    found this tutorial to be very useful ;-)

    It would be an interesting follow up article, if you could could explain how to incorporate the CSS speech bubbles that willmayo has developed?
    http://www.willmayo.com/2007/02/10/css-speech-bubbles/

    I would love to add this to my blog
    but at the moment don't know how ;-(
    Thanks...

    ReplyDelete
  15. thantsinag@gmail.com
    I tried to do three columns rounded template as you say but i couldn't . Firstly i could to make three columns easily ,but when i made to be rounded , it show like this : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:widget" must be terminated by the matching end-tag "".
    How can i repair it ? Pls explain me !

    ReplyDelete
  16. I want my corners rounder. If that can ever happen.

    ReplyDelete
  17. I looks like we are having the same problem. Please make sure all XML elements are closed properly.

    I was a bit confused by the html part. maybe its different for a rounders template?

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. This method seems to work great in Firefox, but not in Explorer, not sure why though...

    Add this:

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    to your code where you want rounded corners, it works and is simple! This one makes all four corners the same.

    You can also define each corner to be different:

    If you want the top rounded and the bottom flat:
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;

    If you want the bottom rounded and the top flat:
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;

    The first number is the top left corner
    the second number is the top right cornet
    the third number is the bottom right corner
    the fourth number is the bottom left corner

    You can make each corner a different radius if you want to, play with it and see what you can do.

    The number is how many pixels the radius is, the larger the number, the more rounded the corner will be.

    Wretha
    read about my adventures living 100% off grid
    http://wretha.blogspot.com

    ReplyDelete
  20. Hi
    found this tutorial to be very useful ;-)
    Thanks
    http://www.css-edge.blogspot.com/

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. Marvellous!

    Quick comment - I had the same problem with gaps between the top and bottom. Rather than use negative margins though, I solved it by adding a 1 pixel border of the 'main panel colour' in the inner spiffyfg div. No idea why this works, but it seems to :-)

    so for the example above...

    .spiffyfg
    {
    background: #C3CCEE;
    border:1px solid #C3CCEE
    }

    just another way of getting to the same place :-)

    cheers,

    - Chris

    ReplyDelete
  23. Hello, Thanks for the tut. I like to use a similar site, but with the option of 1 px, 3px or no border.Css Rounded Corners

    ReplyDelete
  24. Hello, thanks for the tut , i use a similar site, with the option of 1 3 or no px border, http://www.cssroundedcorners.co.uk

    ReplyDelete
  25. a little bit complicated but very challenging. I think the version of Trashboxis much easier to do.

    I will try your code on my magazine templates project: http://arapaaptemplate.blogspot.com

    ReplyDelete
  26. Did you know that there is a way to make rounded corners using only one line of code? I mean literally one line of code!

    But beware that this code will only work with safari and firefox. Lets just hope Opera, IE, Chrome and other browsers could catch up on this.hehe

    http://bloggertinker.blogspot.com/2009/02/how-to-make-rounded-corners-without.html

    ReplyDelete
  27. What if I don't have the b.skin tags?

    ReplyDelete
  28. very interesting post... i like the comments too thanks!!!!

    No Prescription Needed

    ReplyDelete
  29. first 5 minutes everything works just fine, but after it, the rounded corner disappear. and cmiiw, i noticed that too in you sidebar Amanda.

    ReplyDelete
  30. Tried all kinds of options - no corners :(
    Ah well I still like the nice coloured side bars
    Nicola x

    ReplyDelete
  31. http://www.voip-services-provider.co.uk
    Voice over IP (VoIP) software is used to conduct telephone-like voice conversations across the internet. There are many free VOIP Software available on the webs for download. VOIP Software is popular because VOIP phone service is often cheaper than traditional phone service, and is becoming more popular for both business and personal calls.
    VoIP Services

    ReplyDelete
  32. This worked for me on ym test blog. Te only things is I'd like more room between the edge of my text and the border. Any ideas?

    ReplyDelete
  33. haloo how i can use this servise
    send email or visit
    www.londontowncarhir.co.uk

    ReplyDelete
  34. Amanda, another trobleshoot: I defined margins for top and bottom, and it worked, but when selecting a label, the "status-Message" includable appears and it pushes the top away. What i did was to set the top margin for the "status-msg-wrap" div to 0px.

    b:includable id='status-message'
    b:if cond='data:navMessage'
    div class='status-msg-wrap' style="margin-top:0px"
    div class='status-msg-body'
    more code here (i've removed the <> because comments do not allow it)

    hope this is usefull, in case anybody else has the same problem.

    ReplyDelete
  35. this blog is trully informative!

    ReplyDelete
  36. Thanks for this tutorial - it worked for me. However, I would like for the text not to run directly against the border of the rounded boxes. It would be nice if you could show how to change this.

    ReplyDelete
  37. Create Rounded corner DIV using CSS and 4 corner images.

    http://zahidbin.blogspot.com/2010/02/create-rounded-corner-box-with-css.html

    ReplyDelete
  38. I just stumbled on this and loved it...great tutorial! I was wondering - is there a way to put a border around the rounded corner? I tried your borders tutorial, and it gave me square ones...looked kind of odd around rounded corners.

    ReplyDelete
  39. Two CSS Round Corner (no javascript) techniques are discussed here:

    http://911-need-code-help.blogspot.com/2009/10/box-with-round-corners-using-css-and.html

    http://911-need-code-help.blogspot.com/2009/03/box-with-round-corners-using-css-and.html

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post

    ReplyDelete
  42. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  43. I could not find [div id='sidebar-wrapper]. I use Awesome Blogger template. Help!

    ReplyDelete
  44. thanks for those very useful tips, I ll install some rounded corners on my blog now ;)

    ReplyDelete
  45. Thanks for writing about CSS installation tips! I would recommend these info and installation ideas are very intiative. Keep it up though!

    ReplyDelete
  46. Thanks for the tutorial. It was clear enough. Glad you added some images here. It helped.

    ReplyDelete
  47. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  48. thank you for all tutorial . it was a saving grace....

    ReplyDelete
  49. Excellent stuff.. Great help.. Thanks

    ReplyDelete
  50. Hi, I am a lifestyle blogger and followed your tips many times and it helped me a lot. I had changed my blog's width of pictures ( my blog is in blogger). But then, I couldn't post any small size image (like a blog hop button, link - up images etc.). Can you please help me to re-size some particular image of a blog post?

    XOXO, Ayantika

    ReplyDelete
  51. Capanicus provides VoIP Services and Solutions, Smartphone Application, IVR Services, Web Designing and Development with 24*7 support to enhance and compliment business needs

    ReplyDelete
  52. VoIP Voice over Internet Protocol is a methodology and group of technologies for the delivery of voice communications and multimedia sessions over Internet

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy