Border-radius css forms an oval shape

Question

its my first try to set up a footer on my webpage. I'm using fontawesome for displaying my git repo or certain other things.

For the git repo font I am using <i class="fa fa-github"></i>. In my CSS I want to create a circle around it with:

.fa-github{
    background-color: #333;
    color: #FFFFFF;
    border: 0.5rem solid #333;
    border-radius: 50%;
    font-size: 2rem; 
}

Can someone explain to me why i only get an oval shape instead of a circle ?

You need to define a set `width` and `height` to ensure you get a perfect circle. Your code right doesn't have them defined, so the height/width won't be the same, and that's why you're seeing an oval instead. — Kirk Beard, May 27 '21 at 08:18

score 1 · Answer 1 · answered May 27 '21 at 08:19

This is because the block shape containing is not a square I believe. Try defining the proportions and it should work.

.fa-github{
background-color: #333;
color: #FFFFFF;
border: 0.5rem solid #333;
border-radius: 50%;
font-size: 2rem; 
width: 24px;
height: 24px;
}

1 Answers1