Kevin Powell - Community•16mo ago

How do I get all my border radius' the same size?

Hey guys, I'm working on a calculator project- I can't seem to get all my border radius's the same size when it comes to the CSS. Attached is the codepen- can anyone find out how to fix this? I'm trying to apply it to the whole g1 class so they're all the same- but it doesn't seem to work- some look bigger than others: https://codepen.io/spencerrcr/pen/gOZryxX

spencer

CodePen

Calc project revisited

...

2 Replies

Choo♚𝕂𝕚𝕟𝕘•16mo ago

The 70% border radius will look different when the buttons are different sizes. Either use a px value for the border radius or make those buttons the same size.

Naa•16mo ago

You need to set the .g1 elements to the same height and width to make them squares, then set them all to radius: 50%, that will make them all circles. The display grid, and justify/align is to center the contents within the circles.

.g1 {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.g1 {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Then set width: unset on #zero as I see you want that to span multiple columns. I would also then remove the height property (height: 650px) from #calcInterface to allow all the elements to fit.

Gaming

Programming

How do I get all my border radius' the same size?