How to Change Avatar Shape on Blogspot With Different Styles

If you are bored with the default avatar form on blogspot, you can change the form of avatars with css.
- Find code:

</style>

- Then save the code above

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
}

.avatar-image-container{
 border:3px solid #009999 !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

To change the border color code # 009 999 please replace with the desired color
The result is rounded avatar like this:

if you want another style please change the code:

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

With the following code:

Bullet

Code:

border-radius: 20px 100px 100px 20px;
-moz-border-radius: 20px 100px 100px 20px;
-webkit-border-radius: 20px 100px 100px 20px;

Result:

Leaf

Code:

border-radius: 0 100px 0 100px;
-moz-border-radius: 0 100px 0 100px;
-webkit-border-radius: 0 100px 0 100px;

Result:

Hemisphere

border-radius:100px 100px 0 0 ;
-moz-border-radius:100px 100px 0 0 ;
-webkit-border-radius:100px 100px 0 0 ;

Result:

Round Rectangle

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

Result:

Rhombus

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

Result: