border-radius property of CSS 3 is the magic which made internet less squared. This property can be applied to any element to give it rounded corners. Yet, in practice the border-radius is most used on images to make them full rounded.
All you need to do in order to give a image a round appearance is apply the border-radius property with a value equals to 50%:
|
1 |
border-radius: 50% |
It is obviously, but I will mention anyway, to obtain a perfectly round image you must have am image with equal height an width – otherwise you will end up with an elliptic image.
My prefer style for a round image is as follow:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .round-img { border-radius: 50%; max-width: 100px; max-height: 100px; border: 1px solid red; opacity: 0.4; /* 40% transparency */ filter: alpha(opacity=40); /* same, but for IE */ } .round-img:hover { opacity: 1.0; filter: alpha(opacity=100); } </style> |
The image is defined as:
|
1 |
<img src="img-name.jpg" alt="" class="round-img" /> |
And it looks like the following:
Check here the list of browsers in which the border-radius property works.