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;
}

CodePudding user response：

You can fix it using pixels instead of percents:

.contas .div {
border-radius: 99999px;
}

CodePudding user response：

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.

CodePudding user response：

Use for buttons display:inline-flex; and border-radius: 50%;

here is code HTML:

<aricle >
  <!-- row 0 -->
    <input  placeholder="0" type="text" />
  <!-- row 1 -->
  <button >C</button>
  <button >()</button>
  <button >%</button>
  <button >/</button>
  <!-- row 2 -->
  <button >7</button>
  <button >8</button>
  <button >9</button>
  <button >*</button>

  <!-- row 3 -->
  <button >4</button>
  <button >5</button>
  <button >6</button>
  <button >-</button>


  <!-- row 4 -->
  <button >1</button>
  <button >2</button>
  <button >3</button>
  <button > </button>

  <!-- row 5 -->
  <button > /-</button>
  <button >0</button>
  <button >.</button>
  <button >=</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/