Create round corner image by CSS

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, May 05 '15 at 08:07
Do you mean this? [**See demo here**](http://jsfiddle.net/8u4koa1s/). — Ruddy, May 05 '15 at 08:11
you may want to read up on [Draw Circle using css alone](http://stackoverflow.com/questions/6936972/draw-circle-using-css-alone) — jbutler483, May 05 '15 at 08:22

bbosternak · Answer 1 · 2015-05-05T08:31:07.600

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 05 '15 at 08:31

answered May 05 '15 at 08:17

bbosternak

357
4
14

You are right :), post edited – bbosternak May 05 '15 at 08:31

Kurenai Kunai · Answer 2 · 2015-05-05T09:25:51.683

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 05 '15 at 09:25

answered May 05 '15 at 08:10

Kurenai Kunai

1,842
2
12
22

or just use 50% as your declaration. Please also note, the border radius property no longer requires prefixing. :) – jbutler483 May 05 '15 at 08:26
.....will upvote(+1) after the border radius edit ;-) – Luthando Ntsekwa May 05 '15 at 08:38
Removed the prefixes and also made it 50%. :) Thank you for suggestions. – Kurenai Kunai May 05 '15 at 09:28

G.L.P · Answer 3 · 2015-05-05T08:26:41.897

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 05 '15 at 08:26

answered May 05 '15 at 08:11

G.L.P

7,119
5
25
41

Create round corner image by CSS

3 Answers3