How to make Rounded corners In bloggers

First I give Some Introduction Of CSS3.

Do you know that my blog uses some properties of CSS3? For example, look at my main-wrapper and sidebar, you will find that there are shadow effects. If you look at my footer, there you can find text-shadow effects. All the new versions of browsers mainly Firefox (3.5+), Opera (10.5+), Chrome (5+) and Webkit/Safari (3.1+) supports CSS3, while IE (9+) support very few (till date).

What are the Styles that can be Done by CSS3 in Blogger?

So let’s have a look at the styles and properties used for each (supported in all the browsers mentioned above except IE):
1.

Background colors with RGBA and transparacy

background-color: rgba(100, 100, 100, .7);

2.

Rounded Corners in Blogger.

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

3.

Amount of border radius and corners to particular sides.

-webkit-border-top-left-radius: 150px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 150px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 150px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 150px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 150px;
border-top-right-radius: 0px;
border-bottom-right-radius: 150px;
border-bottom-left-radius: 0px;

4.

Box Shadows Effects that can be used for styling Blogger sections like: header, main-wrapper or sidebars.

-webkit-box-shadow: 10px 10px 2px #969696;
-moz-box-shadow: 10px 10px 2px #969696;
box-shadow: 10px 10px 2px #969696;

5.

Text Shadow

text-shadow: 5px 5px 3px #b8b8b8;

"-webkit-border-radius" is used for Webkit browsers, "-moz-border-radius" for Firefox and "border-radius" for Opera.

Adding rounded corners in Blogger

Let’s take the example of header. If you want to have rounded corners for the header section of blogger then find for:

#header {
(Styling properties goes here)
}

And add:

#header {
(Styling properties goes here) -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

The same can be done with outer-wrapper, main-wrapper and sidebars and get rounded corners for each section in Blogger.