How To Add Stylish Border Around Selected Widget Of Blogger?

Today the question is that "How to make your Blog's Widgets or Gadgets more stylish and awesome by using extra CSS borders and shadows around them?" There are many ways through which you can spice up your Blog for your visitors for example use of JQuery, JavaScript and CSS.

Unlike Jquery and JavaScript, CSS is the most easiest method for beautifying your Blog with no worry of being overloaded or heavy to load. Cascading Style Sheets or CSS are the lightest of the finishing tools for the Blog or Website. The borders designed through CSS are fun to add easy customizable and are blogger freindly too.
In this post we are giving six (6) different CSS codes for the borders of the blogger widgets and gadgets. All these six codes have same features and customization techniques. The main advantage of these codes is that they are for single widgets but you can use them for multiple widgets at a time with simple customization that is defined at the end of the post.

Features

• Easy installation with simple steps.
• Quick load time and awesome look.
• Completely CSS, no image.
• Six (6) different styles.
• Completely customizable.
• Can use for single as well as for multiple widgets at a time.

How To Add In Blogspot?

1. First go to Blogger.
2. Open up your desired Blog.
3. Go to the Layout.
4. Open the widget on which you want the border to be applied.
5. Check the URL of the widget for the Widget ID, something like this: "HTML1".
6. Now go back to the Template.
7. Click Edit HTML to open the default template editor.
8. Look for ]]></b:skin>.
9. Copy and paste one of the code, that suits you best, before the "]]></b:skin>."
10. Save and you are done.

Square Border

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
//*Your Extra CSS Here*//
}

Square Border With Background

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
//*Your Extra CSS Here*//
}

Square Border With Background And Shade

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
//*Your Extra CSS Here*//
}

Round Border

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
//*Your Extra CSS Here*//
}

Round Border With Background

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
//*Your Extra CSS Here*//
}

Round Border With Background And Shade

#YourWidgetID {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
//*Your Extra CSS Here*//
}

Customization

• Change #YourWidgetID with the ID of your Widget.
• Edit the color, radius and width of the border.
• Can add extra CSS at //*Your Extra CSS Here*//.
• Set it for multiple widgets by adding widget IDs like #Widget1, #Widget2,... {