why are my borders not circular?

So, I’m not understanding why my borders for my numbers are more oval shaped than circular? I tried setting my calculator div to width:100px, height: 100px, but that seemed to break my 0 on the calculator, any advice? https://codepen.io/spencerrcr/pen/NWMeyGX

CodePenspencer

NWMeyGX

...

Wolle•10/12/22, 8:00 AM

If you want them to be perfect circles you can a) set height and width or b) use aspect-ratio.

WWolle If you want them to be perfect circles you can a) set height and width or b) use...

SpencerOP•10/12/22, 8:16 AM

Ahh thank you for this, I’ll try aspect ratio, cause doing height and width made it funky for me

SpencerOP•10/12/22, 8:19 AM

Here’s an image of what happens when I do with and height of 100% , it cuts off a bit on the right on page reload, also I fixed it for the most part(padding issue)

Wolle•10/12/22, 8:22 AM

I meant to set the width/heigt/aspect-ratio on the buttons. (or the container giving them their size)

SpencerOP•10/12/22, 8:26 AM

I should just be able to do it in my section > div, I’d think since that targets all my divs under my section

SpencerOP•10/12/22, 8:28 AM

Both at 100%, should be right?

Mannix•10/12/22, 8:35 AM

give them a fixed width and height place the text in the center with flexbox and adjust the width for the 0 as you want, you already adjusting border-radius for it anyway

Mannix•10/12/22, 8:37 AM

or for the text you can use line-height trick and set it to the equal to height value

Mannix•10/12/22, 8:39 AM

https://codepen.io/MannixMD/pen/WNJLzyN

CodePenMannix

WNJLzyN

...

MMannix give them a fixed width and height place the text in the center with flexbox and...

SpencerOP•10/12/22, 9:39 AM

Thanks for this and the code pen with it, I’ll mess around with it, my goal is a duplicate Apple Calculator

SpencerOP•10/12/22, 9:39 AM

I think I’m pretty close honestly, some of my CSS still needs to be cleaned up

Mannix•10/12/22, 9:40 AM

yep you are on the right path good luck