How To Add Stylish Borders Around All Blog's Gadget/Widget?

 

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.

Before

After

Expand Your Widget 

For All Of These Code, You Have To Do Some Thing Like This.
Go To Blogger.
Open Edit HTML
Find ]]></b:skin>
And Paste The Below Code Just Before It.

For Simple Square Color Border:-

.widget {
padding: 5px;
border: 1px solid  #ff0000;
}



For Simple  Square  Color Border With Filled Background:-
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff; 
} 



For Simple  Square  Color Border With Filled Background And Shade:-
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}



For Simple Rounded Color Border:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
} 



For Simple Rounded Color Border With Filled Background:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; 
background:#ffffff; 
} 


For Simple Rounded Color Border With Filled Background And Shade:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000; 
}