How to create circle shape of an image with inline css script

CSS styling rounded corners and shadow for images - Know how to create circle shape of a particular image with inline css script compatible to all browsers.

Advertisements

This will give your image a circle look instead of square or radius look. It is just similar to your Google + profile. This is in extend to my previous blog on How to remove or add image border and shadow to a particular image in blogger that was a part of CSS Codes to tune up your blog site.

This effect I have searched web using google, bing, yahoo but didn't get the desired code or a similar example. I have got some ideas and then started playing with the css script and come to the conclusion. The result is given below. You may also scroll down and point to left for "POPULAR POSTS" gadget for live example of application of the code.

You can copy paste the following code for your image tag:

img style='clear: both; border-radius:20em 20em 20em 20em; padding:1em; -moz-border-radius:20em 20em 20em 20em; -webkit-border-radius:20em 20em 20em 20em; -opera-border-radius:20em 20em 20em 20em; -khtml-border-radius:20em 20em 20em 20em;border: 1px solid #a1a1a1;' height="150" width="150"

Keep image height and width attribute same to give it a perfect circle shape. You may also play around with the code above to get desired look and feel (shape) for your image. Alternatively you can use "%"(e.g. 50% for a perfect circle) instead of defining any size.

Example:

Before applying code

After applying code

Related topic:

How to remove or add image border and shadow to a particular image in blogger

CSS Codes to tune up your blog site.

Advertisements:


Advertisements: