When the user changes the square image to a circle image the border remains square. Is it any way to change the border to circle automatically?
If I understand you correctly, please try this approach:
HTML:
<div class="image-cropper">
<img src="your-image" alt="avatar" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -25%; //centers the image
height: 100%;
width: auto;
}
It will circle your image perfectly as we have profile pic in social media.