How to delete gap between two divs with border radius?

Question

I have two divs, a container, and a child. Both of them have the same border-radius: 25px, and there is a gap between them, which I want to avoid

Answer 1

Nesting radius

when nesting a radius, the inner radius should be smaller then the outer on. as there's less distance for the inner radius. in general you should consider the formula: outerRadius = innerRadius + padding + border

so in this case 25px = 21px + 0px + 4px

it can be helpfull to appy a negative margin on the inner element. to make sure the border overlaps the outer border.

.outer,
.outer-radius,
.outer-margin {
  background: orange;
  border: 4px solid blue;
  border-radius: 25px;
  display: inline-block;
}

.inner,
.inner-radius,
.inner-margin {
  background: olive;
  border: 4px solid lime;
  width: 150px;
  height: 150px;
}

.inner {
  border-radius: 25px;
}

.inner-radius {
  border-radius: 21px;
}

.inner-margin {
  border-radius: 21px;
  margin: -1px;
}

<div class="outer-margin">
  <div class="inner-margin"></div>
  smaller inner<br> negative margin
</div>

<div class="outer-radius">
  <div class="inner-radius"></div>
  smaller inner
</div>

<div class="outer">
  <div class="inner"></div>
  same radius
</div>