Circular custom icon image for clusters in Google Map - Web

Libraries

I am using google maps v3 along with MarkerClustererPlus.

Problem I need to make the clustered marker image to be circular, and with a background image (the red part), something like this:

But using the above library, I've only achieved the following:

I tried applying CSS3 to circle the image but it's not working. Code that I've tried:

var imageStyle = "<img alt='menu' style='height:50px; width:50px; align-self:center;  object-fit: cover; border-radius:10px; margin:10px;  -webkit-transform: rotate(90deg);  -moz-transform: rotate(90deg); -o-transform: rotate(90deg);-ms-transform: rotate(90deg); transform: rotate(90deg);' src='" + userImg + "'>";

var style =  {
             textColor: '#FF00FF',
         url: imageStyle,
         height: 100,
         width: 100
     };

var mcOptions = {
                zoomOnClick: false,
                gridSize: 50,
                styles:  style
               };

var markerCluster = new MarkerClusterer(map, markers, mcOptions);