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.

Blogger New Template Designer in Water Splash

This is my first post and i use based on well known Minima template then mixing it with the new Template Designer in blogger in draft, also add some codes and here you could seen it as Water Splash Template. Basically the idea is to make a new template with Transparent image background and use a rounded border as much as possible to make it more stylish. The design looks cool and does not make eye fatigue as it uses much soft blue color. This way will make me could explore all the images without loosing the SEO technique as it renders the Post first than the sidebar.

The worst thing is this template only works best (i mean views) on Firefox browser. IE still does not support many advanced CSS properties like border-radius. What do you think about my template here? Is it cool or not? Needs your comment. Next i will try to explain all the tweak to make your old template (based on Minima) to a new template designer easier. Just wait my post later on.