-4

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

jbutler483
  • 23,112
  • 9
  • 87
  • 141
pasedol
  • 7
  • 1
  • 1
    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`. – LinkinTED May 05 '15 at 08:07
  • it's not radius-border is `border-radius` – Luís P. A. May 05 '15 at 08:08
  • 2
    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

3 Answers3

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="">
bbosternak
  • 357
  • 4
  • 14
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.

Kurenai Kunai
  • 1,826
  • 2
  • 11
  • 22
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>
G.L.P
  • 7,051
  • 4
  • 22
  • 40