Basic Rounded Border HTML Widgets Blog

The new Template Designer is mostly featured with rounded border. Rounded border obviously looks more beautiful than square border. But unfortunately it is not support by Internet Explorer as IE does not support Advance HTML code. It is nice view on Firefox browser. I had designed my Water Splash Template using this rounded corners. Use it with the new Transparent background image from template designer will get a fully beautiful 3D background. Besides it is simply applied to your template.
1) The basic rounded corner CSS is like this :

.examplewidget {
  margin:0 0 10px 0;
  padding:10px 5px;

border:1px solid #4E7597;

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

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

}

2) moz-border-radius rule is : top left, top right, bottom right, bottom left.
Example 1

Use top 10px and bottom 20px
.examplewidget {
  margin:0 0 10px 0;
  padding:10px 5px;
border:1px solid #000000;
  -moz-border-radius: 10px 10px 20px 20px;
  -webkit-border-radius: 10px 10px 20px 20px;
 }

<div style="background-color: #cccccc; width:400px; height:50px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >
</div>
use : 5px

use : 10px

use : 15px

use : 20px

3) Example2
Top left 20px, Top Right 5px, Bottom right 20px and Bottom Left 10px
<div style="background-color: #6B6BFF; width:400px; height:50px; -moz-border-radius: 20px 5px 20px 10px; -webkit-border-radius: 20px 5px 20px 10px; border: 1px solid #000; padding: 10px;" >
</div>

<div style="-moz-border-radius: 10px 20px 10px 20px; -webkit-border-radius: 10px 20px 10px 20px; background-color: #6b6bff; border: 1px solid rgb(0, 0, 0); height: 50px; padding: 10px; width: 400px;">
</div>

Thats the basic way to add rounded border properties on square border. Next i would explain how to rounded the border of each widget on blogger template.