Making image as a css - css

Question

I tried to create this canvas in css:
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/kyfha/35/
I have a problem only with the circle border, it's not exactly like the canvas.
this is my css:
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238);
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.PersonaCanvas img {
display: block;
margin-top:16px;
width:100%;
height:80%;
}
and my html:
<div class="PersonaCanvas">
<img src="http://s8.postimg.org/ij71l6xol/New_Pers_achiever_1.png"/>
</div>
any help appreciated!

Answer 1

Basically you set a width and height of the container to 100px, but when you add a border, it automatically grows in size; if you inspect, you have the final width which is 124px, which comes from the 100px you set, along with the 12px border-left and another 12px border-right. You would either have to manually change it to accommodate the size to add up to 100px, or you can use a css3 method of box-sizing: border-box to do the calculation for you. Also, we had to change the width of the img to 80%, since you want it to stay in proportion to its height within the container. Lastly, the size of the img is fixed, but we have to align its margin: 16px auto 0. Try this updated one:
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238)
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
box-sizing: border-box
}
.PersonaCanvas img {
display: block;
margin: 16px auto 0;
width: 80%;
height: 80%;
}

Answer 2

The issue with the width of the border decreasing is cause by the lack of a bottom border (which is assumed to be 0 pixels)
So by adding a transparent bottom border you can make the width consistent.. (but you will need extra elements to make the ends be curved)
border-bottom: 12px solid transparent;
http://jsfiddle.net/kyfha/39/

Answer 3

I added two other div's. One for a white circle to cover part of the solid bottom border. And I also added the css elements and made te absolute so they will still fit wherever you need them. The border ends are not perfect, but if you made a white image with the correct edhe you have and inseted it into the thrid div tag, you will be perfect.
I hope this helps :)
http://jsfiddle.net/kyfha/44/
<div class="PersonaCanvas">
<img src="http://s8.postimg.org/ij71l6xol/New_Pers_achiever_1.png"/>
</div>
<div class="PersonaCanvas2">
</div>
<div class="PersonaCanvas3">
</div>
Here is the CSS
I changed the size of the image slightly and moved it around a little to give you your image.
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid transparent;
overflow: hidden;
position: absolute;
z-index: 100;
}
.PersonaCanvas2 {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238);
border-bottom: 12px solid rgb(238,238,238);
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
position: absolute;
z-index: 1;
}
.PersonaCanvas3 {
position: absolute;
width: 50px;
height: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #FFF;
top: 110px;
left: 46px;
z-index: 10;
}
.PersonaCanvas img {
display: block;
margin-top:16px;
width:80px;
height:80px;
position: absolute;
left: 10px;
top: -0px;
}
Basicallly I have two instances of the div tag and the image is in one without the border or the radius.