How to Make Circle Images using CSS
Hi All Today I am going to teach you
how to create circle images in your HTML pages.
In Good old days we had websites that displayed all images in the shape of SQUARE or rectangles and now its time to change it and make something new and cool.So, Lets try making circular images in HTML pages.
Well, You Might Have Seen that Websites
like Google plus displays your profile image in a circular shape.
Have you not felt this as cool. But, I Tell you This is Awesome and
You can also Do the SAME
So This Trick can be done by applying a
small CSS Property called Border radius
And for this you will have to use “
border-radius:50% 50% 50% 50%;
“
See the Code Below
<html><head><style>#circle{border-radius:50% 50% 50% 50%;width:300px;height:300px;}</style></head><body><img src="skin-tone.jpg" id="circle"></body></html>
Now Save the Above file as Circle.html
or anyname.html
Lets
see How This Works
I am
using an image “skin-tone.jpg”
see the above code
You
can see that I have declared an id called “circle” inside the
<style> tag . Then I have set border-radius to 50% for all the
4 sides .When Each Side Has Border-radius of 50% then the image will
automatically become a circle.
All
you have to do is to assign this id to the image .then your image
will become a circle...Hope Your Liked this....
(h)
ReplyDeletethank you so much for this wonderful tutorial :)
ReplyDeletebut i have 1 more question.
how to move the circle to right side or center or left?
It really worked for me ... i was looking for this output ... thank u so much ...
ReplyDeletethnx
ReplyDeletethanxxx
ReplyDeleteIt's nice....
ReplyDeleteit's a very usefull.......
thank you.....
Thanks for sharing this post. I use this code and got right solution which is i have required.
ReplyDelete