Rounded Corners for Blogger Widgets

Some time ago, blog reader dirtycowgirl asked if there's a way to give rounded corners for blogger post boxes. Last week, DCG asked if it is possible to extend the tutorial to cover the entire blog. So here it is folks, a tutorial on how you can give rounded corners to your widget boxes. Refer to the other tutorial on how you can give rounded corners to post boxes. BTW, this tweak works best for designer templates (built-in Blogger templates). Even though I put on a lot of efforts to make the tutorials in this blog as generic as possible, sometimes it is just impossible to cover all grounds. In case this tweak doesn't work for you, feel free to leave a comment and I will advise you accordingly. Oh, it won't work in most IEs. I'm not sure about IE9 though, feel free to give it a try.

Step 1:

I decided to divide and conquer this time. For the first step, we're gonna apply the tweak to all widget boxes except for Pages/Linklist gadget, because they tend to vary a lot across different templates. Here's what you should do:


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
 
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 

.widget, .blog-pager{
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
}

At this point most (almost all) of your widget boxes should have been tweaked.

Step 2:

And now, for Pages/Linklist gadget. I tried my best to generalize this one, but I can't promise if it will cover all templates. Just give it a try, and if it doesn't work, leave a comment. If you've applied my Pages Gadget No-Stretch tweak, please reverse/undo the tweak before attempting this step.

 If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed -

Find for /* Headings ----------------------------------------------- */ - Paste the following code directly above it (see the screenshot):

/*--SS Pages Gadget Rounded Corners Starts--*/
.tabs-outer {
background: transparent !important;
}
 
.cap-top, .cap-bottom{
border: none !important;
}
 
#crosscol{
background: transparent !important;
border: none !important;
}

.tabs-inner .widget ul {
background: transparent !important;
border: none !important;
}

.tabs-inner .widget li:first-child a{
border-left: 1px solid $(tabs.border.color) !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
border-top: 1px solid $(tabs.border.color) !important;
border-bottom: 1px solid $(tabs.border.color) !important;
background: $(tabs.background.color) $(tabs.background.gradient);
}

.tabs .widget ul li:first-child a{
-moz-border-top-left-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-goog-ms-border-top-left-radius: 10px !important;
border-top-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-goog-ms-border-bottom-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}

.tabs .widget ul li:last-child a{
-moz-border-top-right-radius: 10px !important;
-webkit-border-top-right-radius: 10px !important;
-goog-ms-border-top-right-radius: 10px !important;
border-top-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
-goog-ms-border-bottom-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

/*--SS Pages Gadget Rounded Corners Starts Ends--*/

If you get "Invalid variable declaration" error, use this one instead:

/*--SS Pages Gadget Rounded Corners Starts--*/
.tabs-outer {
background: transparent !important;
}
 
.cap-top, .cap-bottom{
border: none !important;
}
 
#crosscol{
background: transparent !important;
border: none !important;
}

.tabs-inner .widget ul {
background: transparent !important;
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
background: $(tabs.background.color) $(tabs.background.gradient);
}

.tabs .widget ul li:first-child a{
-moz-border-top-left-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-goog-ms-border-top-left-radius: 10px !important;
border-top-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-goog-ms-border-bottom-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}

.tabs .widget ul li:last-child a{
-moz-border-top-right-radius: 10px !important;
-webkit-border-top-right-radius: 10px !important;
-goog-ms-border-top-right-radius: 10px !important;
border-top-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
-goog-ms-border-bottom-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

/*--SS Pages Gadget Rounded Corners Starts Ends--*/

The code in place (Ending portion)

That will be all. And, the Transformers post got delayed due to unforeseen circumstances. Hopefully there will be one sometime in next week, if I'm still alive. Cheers and God bless.