CODEWITHSUNDEEP
htmlcsssvg
rocking
rocking

Reputation: 4899

How to make rounded images

I want to make rounded images like this I have searched and googled but I did not find any solutions to make image rounded.I can do images rounded border like this but I dont know how to make the image itself rounded.Please help

Upvotes: 2

Views: 2494

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Try this, Change radius by adjusting height and width. height and width should be equal and double of the radius you required

HTML :

<div id="round">
</div>

CSS :

#round{
    height:100px;
    width:100px;
    border-radius:50%;
    background:green;
    overflow:hidden;
}

Fiddle Demo / updated

Check this for responsive circle DEMO

Upvotes: 2

Tschallacka
Tschallacka

Reputation: 28722

If you specifically want a white box with a rounded image in it, you simply make a div with the said width & height you want. Give it a background color and a border of 1px in the same background color. Then in the div place an image with borderradius of 50% and width and height of 100% to fill the box and you're done.

Try this: http://jsfiddle.net/fWwgD/

<style type="text/css">
 body
  {
  background-color:black;
  }
#box 
  {
  width:300px;
  height:300px;
  background-color:white;
  border: 1px solid white;
  }
.circle 
  {
  border-radius:50%;
  width:100%;
  height:100%;
  }
</style>
<div id="box">
   <img src="https://www.gravatar.com/avatar/01f40d1a1219433e2f7ab40fab531142?s=32&d=identicon&r=PG&f=1" class="circle">
</div>

Upvotes: 2

Nitesh
Nitesh

Reputation: 15749

Use border-radius to achieve what you are looking for.

WORKING DEMO

The code:

img{border-radius:50%;}

Upvotes: 2

Related Questions