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....

Comments

  1. thank you so much for this wonderful tutorial :)

    but i have 1 more question.
    how to move the circle to right side or center or left?

    ReplyDelete
  2. It really worked for me ... i was looking for this output ... thank u so much ...

    ReplyDelete
  3. It's nice....
    it's a very usefull.......
    thank you.....

    ReplyDelete
  4. Thanks for sharing this post. I use this code and got right solution which is i have required.

    ReplyDelete

Post a Comment

Popular posts from this blog

Hack Wifi with Fern Wifi Cracker

How to Decompile JAR files and View Source Code of Java Programs

Using phpMailer to Send Mail through PHP