Create round corner image by CSS [duplicate]

Question

I want to create image avatar like avatar contact of skype,can you help me ?, I try use border radius-border but lucky

I don't understand your question. Can you add a sketch of what you want? And please add the code that you've tried so far. Please note that the correct syntax is border-radius. — GreyRoofPigeon
– GreyRoofPigeon, Commented May 5, 2015 at 8:07

bbosternak · Accepted Answer · 2015-05-05 08:31:07Z

2

I think you can use border-radius on img tags, too.

img{
    border-radius: 50%;
}

<img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="">

edited May 5, 2015 at 8:31

answered May 5, 2015 at 8:17

bbosternak

3574 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bbosternak Over a year ago

You are right :), post edited

G.L.P · Accepted Answer · 2015-05-05 08:26:41Z

0

Try like this: Demo

div.avatar {
    border-radius:50%;
    overflow:hidden;
    width:100px;
    height:100px;
    border:1px solid #ccc;
}
div.avatar img {   
    height:100%;
}

HTML:

<div class="avatar">
    <img src="http://www.stockazoo.com/uploads/3/5/4/5/3545172/5579090_orig.jpg" />
</div>

edited May 5, 2015 at 8:26

answered May 5, 2015 at 8:11

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

Comments

Kurenai Kunai · Accepted Answer · 2015-05-05 09:25:51Z

0

CSS:

.circleImage {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: green;
}

HTML:

<div class="circleImage"></div>

Keep the border radius half of the width or height for circular images like in Skype.

edited May 5, 2015 at 9:25

answered May 5, 2015 at 8:10

Kurenai Kunai

1,9022 gold badges14 silver badges23 bronze badges

3 Comments

jbutler483 Over a year ago

or just use 50% as your declaration. Please also note, the border radius property no longer requires prefixing. :)

Luthando Ntsekwa Over a year ago

.....will upvote(+1) after the border radius edit ;-)

Kurenai Kunai Over a year ago

Removed the prefixes and also made it 50%. :) Thank you for suggestions.

Collectives™ on Stack Overflow

Create round corner image by CSS [duplicate]

3 Answers 3

1 Comment

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Linked

Related