Question
why setting the radius of the #banner .content h1 border to 100% gives me an oval and not a circle?
Answer
Having 100% on border-radius should give you a perfect circle, that is correct, only if the element’s height and width are the same. That is, you need a square element to have a circle border. As well, if your element does not have specific measurements it is at the mercy of the size of the container and its own content, and therefore you will need to adjust its measurements if your goal is to have a circle border.
29 Likes
Setting the border-radius to 50% is sufficient to get an oval.
4 Likes
Thanks for the answer.
I’m a little confused as to why the content is overflowing the border? Shouldn’t content be inside the border since border surrounds the content area (in case there’s no padding)?
2 Likes
because by default the overflow property is set to “visible” value and therefore the content is visible outside of the border
But if you set the overflow property to “hidden/scroll” value… then you will find that the content is confined within the border of the element
7 Likes
Hello, thanks for the answer, but still, text isn’t much visible. How I can put the text in the center of this cercle? I try with text-alight and margin-top, but all block change the place, not only the text inside.
Thank you!
5 Likes
I found 
need to add :
#banner .content h1
{
display: flex;
align-items: center;
}
13 Likes
Hello, there!
Can I ask and interest?
Why when I try to create a border radius in my border box here (at those #banner .content h1 selector) and want to create the Cyrcle border radius - it creates only an Oval? I try as it says that the border radius must be the same as width and height of your border box. Try to set also even the 100% too (not just in pixels). What maybe I can do wrong?
Thanks so much
For an element’s border to be a perfect circle, not only does its border-radius property have to be set to 50% (yes that is sufficient enough, no need for 100%), but the width and height properties of that element must be the same. This means that if we didn’t change the border-radius of that element, the border must come out as a perfect square
4 Likes
How can we explain the meaning of border radius of 50%/ 30%/ 100%…?
you can also just add top padding
How would you separate changes to font-size and border? I’ve got my perfect circle, but the font-size is a little large and I would like it to fit inside of my circle. However, when I change font-size, the border size also changes. I am looking over the code to see what I’m missing, but I’m still a little green with this stuff 
Messing with line-height, padding and such seems to get me near my goal, but not quite there. It seems like there should be some sort of wrap property for content inside of a border, but I suppose it’s not that simple.
From what you’re explaining, I don’t think you gave your element a width and height property, so it will adjust to the font size. Just give the circle the same width and height, adjust the font size, and give your circle a border-radius of 50%
3 Likes
Do I understand correctly that going beyond 50% wouldn’t change anything?
Thx mate. That was helpful.
I am getting the same size of Oval when I give border-radius: 50% as well as when I give it 100%, why is that so?
