Small circle div - CSS [duplicate] - css

Question

This question already has answers here:
How to use CSS to surround a number with a circle?
(20 answers)
Closed 7 months ago.
I'm trying to make the divs round as much as possible. however it should be "small", without having to increase width and height to 100px.
image of my calcualtor
here is the code:
.contas div {
color: white;
display: inline-block;
border: 0;
width: 40px;
border-radius: 100%;
text-align: center;
padding: 10px;
margin: 20px 4px 10px 1px;
cursor: pointer;
background-color: #202020;
transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

Answer 1

If you really want to get a circle, you need an equal amount of height and width on your div.
That way you get a square.
Then you add a border-radius of 50% for the perfect circle.
You're less likely to get a perfect circle if the height and width of the div are not the same.

Answer 2

Use for buttons display:inline-flex; and border-radius: 50%;
here is code HTML:
<aricle class="contas">
<!-- row 0 -->
<input class="contas__head" placeholder="0" type="text" />
<!-- row 1 -->
<button class="contas__btn">C</button>
<button class="contas__btn">()</button>
<button class="contas__btn">%</button>
<button class="contas__btn">/</button>
<!-- row 2 -->
<button class="contas__btn">7</button>
<button class="contas__btn">8</button>
<button class="contas__btn">9</button>
<button class="contas__btn">*</button>
<!-- row 3 -->
<button class="contas__btn">4</button>
<button class="contas__btn">5</button>
<button class="contas__btn">6</button>
<button class="contas__btn">-</button>
<!-- row 4 -->
<button class="contas__btn">1</button>
<button class="contas__btn">2</button>
<button class="contas__btn">3</button>
<button class="contas__btn">+</button>
<!-- row 5 -->
<button class="contas__btn">+/-</button>
<button class="contas__btn">0</button>
<button class="contas__btn">.</button>
<button class="contas__btn">=</button>
</aricle>
here is code SCSS:
$contas-color: #f2f2f2;
$contas-fill: #000000;
$contas-fill-light:#202020;
$contas-radius: 1rem;
$contas-space: 0.75rem;
$contas-field-size: 4rem;
$contas-btn-size: var(--contas-btn-size, 2.5rem);
$contas-btn-hover-fill: #ff810f;
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 1.5rem;
background-color: $contas-color;
}
.contas {
position: relative;
display: grid;
grid-gap: 0.8rem 0.5rem;
grid-template-columns: repeat(4, $contas-btn-size);
justify-content: center;
align-items: center;
width: 12.5rem;
padding: calc(#{ $contas-field-size + ($contas-space* 1.5)}) $contas-space ($contas-space* 1.5) ;
background-color: $contas-fill;
border-radius: $contas-radius;
overflow: hidden;
&__head {
position: absolute;
inset: 0 0 auto;
min-height: $contas-field-size;
padding: 0 ($contas-space*1.5);
font-size: 1.5rem;
font-weight: 500;
text-align:right;
color:$contas-color;
border: unset;
user-select: none;
background: $contas-fill-light;
pointer-events:none;
&:focus, &:active, &:hover {
color:$contas-color;
outline: none;
box-shadow: none;
}
}
&__btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
width: $contas-btn-size;
aspect-ratio: 1 / 1;
text-align: center;
border-radius: 50%;
border: unset;
background-color: $contas-fill-light;
transition: .3s lianer;
transition-property: background-color, box-shadow, transform;
cursor: pointer;
&:hover, &:active{
background-color: $contas-btn-hover-fill;
}
&:active{
transform: scale(1.15);
}
}
}
see https://jsfiddle.net/d4htsLgb/2/

Answer 3

You can fix it using pixels instead of percents:
.contas .div {
border-radius: 99999px;
}