Round borders separated in sections around circular image

border, css, css-shapes

Solution

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

Problem

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.

Original source