Blogger Tutorial - How to Add Rounded Edges to Your Profile Photo

I recently received a request to do a Blogger Tutorial  on how to change the Blogger profile photo from straight edges to round edges. It is actually very very simple. It is basically a one step process. First of all let me show you what I mean by rounded edges.

[caption id="attachment_197" align="aligncenter" width="344" caption="before"][/caption]

[caption id="attachment_198" align="aligncenter" width="342" caption="After"][/caption]

 

So how did I do it?

Log into Blogger and navigate to Template > Customise > Advanced > Add CSS.

Copy the following code and paste into the box titled add css. If you want the edges even more rounded just increase the values that are currently set to 20px.

.profile-img {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-width: 0;
box-shadow: 0 0 0 transparent;
padding: none !important; border: none !important; background: none !important; -moz-box-shadow: 0px 0px 0px transparent !important; -webkit-box-shadow: 0px 0px 0px transparent !important; box-shadow: 0px 0px 0px transparent !important;
}

Press 'apply to blog'

Ta da! You now have curved edges. As usual if you have any problems with this Blogger Tutorial leave me a comment and I'll do my best to help.