How To Add Stylish Border Around Widget Of Blogger

Today the question is that "How To Make Your Blog Widgets/Gadgets Stylish And Awesome Through Adding Extra CSS Borders Around Your Desired Widgets?"

Some time your template is so simple that it can not attract visitors, so you have to spices up your blog, but after that time your blog gonna heavy day by day and visitors also dislike this. So now here is the middle way to design simple and stylish with easy and short coding.

If you want to add borders you can also use this code, There are many different type of codes given below. For All Of These Code, You Have To Do Some Thing Like This.

Features:

• It Will Change Your Desired Widget Background Only Not All.
• Simple Steps Wioth Easy Installation.
• Quick To Load And Awesome In Look.
• Pure CSS Code.
• 6 Different Style Is Provided Below.
• Fully Customizable.

How To Add In Blogspot?

• Go To Your Blogger Dashboard.
• Open Your Desire Blog.
• Go To "Layout".
• First Find That Widget ID On Which You Want To Style Up...(If You Don't Know How To Get Widget ID Just Comment Below, I Will Explain You Easily)
• Now Go To "Template"
• Click "Edit HTML" Button To Edit It.
• Now Press "CTRL+F" And Find ]]></b:skin>
• Copy The Below Code And Paste It Just Before It.

For Simple Square Color Border:-

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

For Simple Square Color Border With Filled Background:-

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

For Simple Square Color Border With Filled Background And Shade:-

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

For Simple Rounded Color Border:-

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

For Simple Rounded Color Border With Filled Background:-

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

For Simple Rounded Color Border With Filled 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 Your Desired Widget ID Code.
• Change The Value Of Given CSS Also With Your Desire.
• Change //*Your Extra CSS Here*// With Your CSS Code. 
• Save And Done.
• Enjoy.. 
• If You Having Any Problem Then Comment Below...