Issue
Working on creating circular avatar images in a Node Web App and when I set the image's Boostrap class to:
class="rounded-circle"
It appears as an oval, rather than a circle. I've seen similar questions on here where answers have indicated the original images dimensions may play a factor in the shape of the circle. The below vanilla CSS with a custom class had the same effect in creating an oval instead of a circle:
.player-circle {
border-radius: 50%;
}
What can I do (from a CSS or Bootstrap standpoint) to ensure the avatar actually displays as a perfect circle rather than a more ovular shape? Thanks in advance for the help
Solution
You should define it as square,then apply border-radius.Here's the solution:
.rounded-circle{
border:1px solid;
border-radius:50%;
width:50px;
height:50px;
}<div class="rounded-circle"></div>Answered By - Rishab Tyagi
