Round borders separated in sections around circular image

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

1. Use borders with border-radius to create the borders.
   step 1
2. 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

3. 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;
}