Round borders separated in sections around circular image - border

Question

I am wondering how it is possible to create the following effect using only CSS:
Desired output :
Currently, all I can think of is adding a border around the image. But how can I cut them and make sections out of them around the image?
This is my current CSS:
.avatar img {
border-radius: 50%;
border: solid 3px #65C178;
border-width: 4px;
}
And HTML:
<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>
Preview: JSFiddle Example
This only gives a border around the avatar image, not the green sections with white spacings.

Answer 1

DEMO
Output :
Explanation
Creating the borders
Use borders with border-radius to create the borders.
step 1
Then transform rotate to make the left top border appear at the right place.Step 2 (don't forget to "unrotate" the image by rotating it the other way so it stays vertical)
The white spaces
Use pseudo elements to create the white spacings at the bottom and the right of the image. step 3
Unless you have very special requirements for browser support, you can remove the vendor prefixes for the border-radius property. Check canIuse for more info.
CSS :
.avatar{
border: solid 4px #54BE69;
border-left-color:#D5EDDA;
padding:2px;
display:inline-block;
border-radius: 50%;
position:relative;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.avatar img{
display:block;
border-radius: 50%;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.avatar:before, .avatar:after{
content:'';
position:absolute;
background:#fff;
z-index:-1;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.avatar:before{
height:4px;
top:50%;
left:2px; right:-5px;
margin-top:-2px;
}
.avatar:after{
width:4px;
left:50%;
top:2px; bottom:-5px;
margin-left:-2px;
}

Answer 2

Here you have an example with sass.. (quickly Googled)
http://codepen.io/geedmo/pen/InFfd
EDIT: As requested in comments here's a little improvement with some quick tweaks to that codepen
SASS DEMO LINK
SASS:
// Colors
$progressColor: #65C178
$pendingProgressColor: #D5EDDA
$backColor: #fff
/* -------------------------------------
* Avatar img
* ------------------------------------- */
.avatar img
border-radius: 50%
border: solid 3px #fff
border-width: 3px
margin-top: 4px
margin-left: 4px
/* -------------------------------------
* Progress Bar
* ------------------------------------- */
.progress-radial
float: left
margin-right: 30px
position: relative
width: 142px
height: 142px
border-radius: 50%
border: 2px solid $backColor // remove gradient color
background-color: $progressColor // default 100%
/* -------------------------------------
* Mixin for progress-% class
* ------------------------------------- */
$step: 5 // step of % for created classes
$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
#for $i from 0 through $loops
.progress-#{$i*$step}
#if $i < $half
$nextdeg: 90deg + ( $increment * $i )
background-image: linear-gradient(90deg, $pendingProgressColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
#else
$nextdeg: -90deg + ( $increment * ( $i - $half ) )
background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent), linear-gradient(270deg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
For the separator of the progress sections another mixin could be included

Answer 3

here is a solution: jsfiddle
CSS
.avatar img {
border-radius: 50%;
border-width: 4px;
padding: 4px;
background-image: linear-gradient(-90deg, #65C178 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, #65C178 50%, rgba(0, 0, 0, 0) 50%);
}
HTML
<div class="avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" />
</div>
Note: change the deg value in the second linear-gradient to change the percentage filled.

Answer 4

We cant get the exact like your image. But something we can get it. Add the following line of code in your css.
border-top-color:#ff00ff;
border-bottom-color:#0000ff;
border-left-color:#00ff00;
border-right-color:#000;
Updated jsfiddle below.
http://jsfiddle.net/vz964/1/