Rounding an image and positioning it with CSS

Question

I have an image like this one:

I want to apply a rounded effect on the green part (I have added the black border so you can see what the image looks like) but as you can see from the code below it does not put the green part in the center, one side of it is chopped off.

img {
    border-radius: 90px;
    -o-border-radius: 90px;
    -moz-border-radius: 90px;
    -webkit-border-radius: 90px;
}

<img src="https://i.sstatic.net/1PXL5.png">

I'm not sure what property I could use to reach the desired effect or how I could round it keeping the green part in the center. using CSS only hopefully.

Answer 1

you can do it this way to clean the edges for nice look :

#roundImg {
    border-radius:100% !important;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -khtml-border-radius: 100%;
     
    border:2px solid #C9C9C9;
    width: 90px;
    height:90px;
   
   overflow: hidden;
  
  
} #roundImg img {
         position :relative; 
         top:-18px;  right:55px;
         }

<div id="roundImg">
<img src="https://i.sstatic.net/1PXL5.png">
</div>

or you can mess with the (width & height & top & right ) to let the sharp edges show up :

#roundImg {
    border-radius:100% !important;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -khtml-border-radius: 100%;
     
    border:2px solid #C9C9C9;
    width: 110px;
    height:110px;
   
   overflow: hidden;
  
  
} #roundImg img {
         position :relative;
         top:-8px;  right:44px;
         }

<div id="roundImg">
<img src="https://i.sstatic.net/1PXL5.png">
</div>

Answer 2

You can try it as a background image and adjust the needed properties :

div {
    display:inline-block;
    height:100px;
    width:100px;
    border-radius: 90px;
    border:1px solid;
    background-image:url(https://i.sstatic.net/1PXL5.png);
    background-position:top right;
    background-size:125% 125%;
    background-repeat:no-repeat;
}

<div ></div>