CSS: How to overlap circle element properly

Issue

What I want to do is to cover circle element with square. But I can still see circle border.

When I inspect the element, the child element size doesn't include the parent's border (118px x 118px) so I tried to remove box-sizing: border-box;. Even though child element size is 120px x 120px, the same thing still happens.

How can I cover the circle properly?

.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid red;
  box-sizing: border-box;
  background-color: white;
}

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

/* added by editor for betetr visualization purpose */
body {
  background: gray;
}

<div class="circle">
  <div class="square"></div>
</div>

Solution

The content itself starts within the border, not at the end of the border. As such you have to position the element out of the content area. Instead of using top, right, bottom, left you could simply use inset:

.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid red;
  box-sizing: border-box;
  background-color: white;
}

.square {
  position: absolute;
  inset: -1px;
  background-color: white;
}

/* added by editor for betetr visualization purpose */
body {
  background: gray;
}

<div class="circle">
  <div class="square"></div>
</div>

Answered By - tacoshy